1.條件語(yǔ)句

@if類似與JavaScript中的if,條件為true返回一堆代碼塊，為false返回另一個(gè)代碼塊。同樣可以與@else , @else if結(jié)合使用。

$boolean: true ; 
p{
   @if $boolean{
       display:block;
   } @else {
      display:none;
   }
}

//編譯后
p{display:block;}

2.循環(huán)語(yǔ)句

@for類似與JavaScript中的for循環(huán)，不過語(yǔ)法稍有不同，它有兩種形式。
（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é)束時(shí)不包括<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來定義變量，實(shí)現(xiàn)遞增或遞減。

3.Sass多值變量

多值變量分為list類型和map類型，簡(jiǎn)單來說list類型有點(diǎn)像js中的數(shù)組，而map類型有點(diǎn)像js中的對(duì)象。

(1) list類型

在sass 中list類型是通過空格或逗號(hào)隔開的一串值。如：2,4,6,8 或2 4 6 8 。
也可以是多維數(shù)組，如：a b,c d 或(a,b)(c,d)表示包含數(shù)組a b,c d兩個(gè)數(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成對(duì)出現(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ù)名以$符號(hào)開始，多個(gè)參數(shù)以逗號(hào)分開，也可以給參數(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;
}