1.條件語句
@if類似與JavaScript中的if,條件為true返回一堆代碼塊，為false返回另一個代碼塊怕犁。同樣可以與@else , @else if結(jié)合使用雅潭。
$boolean: true ;
p{
@if $boolean{
display:block;
} @else {
display:none;
}
}
//編譯后
p{display:block;}
2.循環(huán)語句
@for類似與JavaScript中的for循環(huán)均蜜，不過語法稍有不同担平，它有兩種形式示绊。
（1）第一種形式從<start>開始循環(huán)芥挣，到<end>結(jié)束。
@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>結(jié)束，循環(huán)包括<end>空另。
（2）第二種形式從<start>開始循環(huán)盆耽，到<end>結(jié)束，結(jié)束時不包括<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;}
小結(jié)：
兩種@for形式中摄杂，<start> 和<end>必須是整數(shù)。其中@var 可以是任何變量名循榆，我通常習(xí)慣用@item來定義變量析恢，實現(xiàn)遞增或遞減。
3.Sass多值變量
多值變量分為list類型和map類型秧饮，簡單來說list類型有點(diǎn)像js中的數(shù)組映挂，而map類型有點(diǎn)像js中的對象。
(1) list類型
在sass 中list類型是通過空格或逗號隔開的一串值盗尸。如：2,4,6,8 或2 4 6 8 柑船。
也可以是多維數(shù)組，如：a b,c d 或(a,b)(c,d)表示包含數(shù)組a b,c d兩個數(shù)組的數(shù)組泼各。
可用nth($var,$index)取值如：
//sass style
//一維數(shù)據(jù)
$test: 10px 9px 8px 7px;
//二維數(shù)據(jù)
$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數(shù)據(jù)以key和value成對出現(xiàn)，其中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;
}
或用循環(huán)
@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.擴(kuò)展
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聲明混合溪烤，可以傳遞參數(shù)，參數(shù)名以$符號開始庇勃，多個參數(shù)以逗號分開檬嘀，也可以給參數(shù)設(shè)置默認(rèn)值。聲明的@mixin通過@include來調(diào)用责嚷。
(1) 無參數(shù)的混合器
@mixin btn {
color:red;
&:hover{
color:blue;
}
}
.pri-btn{
@include btn
}
///編譯后
.pri-btn{
color:red;
}
.pri-btn:hover{
color:blue;
}
(1) 有參數(shù)的混合器
@mixin btn($normal,$active) {
color:$normal;
&:hover{
color:$active;
}
}
.pri-btn{
@include btn(#fff,#ccc);
}
///編譯后
.pri-btn{
color:#fff;
}
.pri-btn:hover{
color:#ccc;
}
