-
sass,需要写分号，{}括号成对写， 先变量，再使用，$red：red； body{color：$red；}查看全部
-
慕课上要是有个gulp的系列教程 就好了 ╮(╯╰)╭。。。查看全部
-
使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多，也是 CSSer 期望看到。但是他不能传变量参数。查看全部
-
如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。查看全部
-
1-sass加减乘除符号周围有两个空格 2-sassfor循环及使用，如截图查看全部
-
SassScript 支持 CSS 的两种字符串类型： 有引号字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'； 无引号字符串 (unquoted strings)，如 sans-serifbold。查看全部
-
[Sass]数据类型 数字: 如，1、 2、 13、 10px； 字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz； 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)； 布尔型：如，true、 false； 空值：如，null； 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。查看全部
-
sass注释 1-/*...*/会在css中显示 2-//不会在css中显示查看全部
-
使用了占位符%的代码若没有被调用，不会在css中产生代码块，eg1. %mt5 { margin-top: 5px; } eg2.： //SCSS %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } } 编译后： //CSS .btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; } 通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。（css选择器） 使用时只能通过@extend调用查看全部
-
sass传一个不带值的参数（类似于工厂模式） @mixin border-radius($radius){//申明 -webkit-border-radius: $radius; border-radius: $radius; } .box {//调用 @include border-radius(3px); } .box {//编译后 -webkit-border-radius: 3px; border-radius: 3px; }查看全部
-
带逻辑关系的混合宏（混合宏前边用@mixin定义） @mixin box-shadow($shadow...) { @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } }查看全部
-
伪类嵌套和属性嵌套类似，伪类嵌套需借助`&`符号一起配合使用 .clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } } 编译后： clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }查看全部
-
sass属性嵌套 .box { border-top: 1px solid red; border-bottom: 1px solid green; } =》 .box { border: { top: 1px solid red; bottom: 1px solid green; } }查看全部
-
nav { a { color: red; header & { color:green; } } } 编译后 nav a { color: red; } header nav a { color: green; } 其中，&相当于当前处于的这个对象查看全部
-
Sass全局变量与局部变量的调用 //SCSS $color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量) .block { color: $color;//调用全局变量 } em { $color: red;//定义局部变量 a { color: $color;//调用局部变量 } } span { color: $color;//调用全局变量 }查看全部
举报
0/150
提交
取消