1.条件语句
@if类似与JavaScript中的if,条件为true返回一堆代码块，为false返回另一个代码块。同样可以与@else , @else if结合使用。
$boolean: true ;
p{
@if $boolean{
display:block;
} @else {
display:none;
}
}
//编译后
p{display:block;}
2.循环语句
@for类似与JavaScript中的for循环，不过语法稍有不同，它有两种形式。
（1）第一种形式从<start>开始循环，到<end>结束。
@for $var from <start> through <end>
例子
@for $item from 1 through 3 {
.test-#{$item} { height:5px * $item ;}
}
//编译后
.test-1{height:5px;}
.test-2{height:10px;}
.test-3{height:15px;}
说明：这种形式的@for从<start>开始，到<end>结束，循环包括<end>。
（2）第二种形式从<start>开始循环，到<end>结束，结束时不包括<end>的值。
@for $var from <start> to <end>
例子
@for $item from 1 to 3 {
.test-#{$item} { height:5px * $item ;}
}
//编译后
.test-1{height:5px;}
.test-2{height:10px;}
小结：
两种@for形式中，<start> 和<end>必须是整数。其中@var 可以是任何变量名，我通常习惯用@item来定义变量，实现递增或递减。
3.Sass多值变量
多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。
(1) list类型
在sass 中list类型是通过空格或逗号隔开的一串值。如：2,4,6,8 或2 4 6 8 。
也可以是多维数组，如：a b,c d 或(a,b)(c,d)表示包含数组a b,c d两个数组的数组。
可用nth($var,$index)取值如：
//sass style
//一维数据
$test: 10px 9px 8px 7px;
//二维数据
$test1: 5px 10px, 0 auto;
$test2:( 5px 10px)(0 auto);
div {
margin: nth($test1, 2);
padding: nth($test, 1);
}
//编译后
div {
margin: 0 auto;
padding: 10px;
}
也可以类似使用@for一样
@each $var in <list>
其中<list>是一组通过,分割的字符；如：
@each $icon shake,bottle,shopping {
.#{$icon} {
background: url('./assets/img/#{$icon}.png');
}
}
编译后：
.shake{
background: url('./assets/img/shake.png');
}
.bottle{
background: url('./assets/img/bottle.png');
}
.shopping {
background: url('./assets/img/shopping .png');
}
(2) map类型
map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。
$map:( baidu: #fff, BABA: #ccc, tx: #000);
.baidu{
background-color: map-get($map, baidu);
}
.BABA{
background-color: map-get($map, BABA);
}
//编译后
.baidu{
background-color: #fff;
}
.BABA{
background-color: #ccc;
}
或用循环
@each $key, $value in (key: value, key: value);
@each $selector, $color in ( baidu: #fff, BABA: #ccc, tx: #000); {
#{$selector} {
background-color: $color ;
}
}
//编译后
.baidu{
background-color: #fff;
}
.BABA{
background-color: #ccc;
}
.tx{
background-color: #000;
}
4.扩展
Sass中，@extend指令是继承既有样式。
.icon{
vertical-align: middle;
}
.icon.span{
display: inline-block;
}
.shake-icon{
background: url('./assets/img/shake.png');
@extend .icon
}
///编译后
.icon,.shake-icon{
vertical-align: middle;
}
.icon.span,.shake-icon.span{
display: inline-block;
}
.shake-icon{
background: url('./assets/img/shake.png');
}
说明：@extend的继承是继承所有的样式。
5.混合器(mixin)
Sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。
(1) 无参数的混合器
@mixin btn {
color:red;
&:hover{
color:blue;
}
}
.pri-btn{
@include btn
}
///编译后
.pri-btn{
color:red;
}
.pri-btn:hover{
color:blue;
}
(1) 有参数的混合器
@mixin btn($normal,$active) {
color:$normal;
&:hover{
color:$active;
}
}
.pri-btn{
@include btn(#fff,#ccc);
}
///编译后
.pri-btn{
color:#fff;
}
.pri-btn:hover{
color:#ccc;
}
