上篇文章我們介紹了Sass的日常使用方法，今天我們來介紹Sass的高階用法，這將會顛覆你對寫css的印象。

條件語句

判斷：@if 和@else
當 @if 的表示式返回值是true時，則輸出 {} 內的程式碼

div {
  @if 1 + 1 == 2 { border: 1px #ccc solid; }
  @if 5 < 3 { border: 2px #f00 solid; }
}

//編譯為

div {
  border: 1px #ccc solid; 
}

@if和@else可搭配在一起使用

$type: sass;
p {
  @if $type == css { color: blue; }
  @else
 
 $type == sass { color: red; } 
}

//編譯為

p { color: red; }

迴圈語句

@for：有兩種格式，@for varfrom<start>through<end>，或者@for$varfrom<start>through<end>，或者@for$var from to 。

@for $num from 1 through 3 {
  .list-#{$num} { width: 200px * $num; }
}

//編譯為

.list-1 { width: 200px; }
.list-2 { width: 400
 
px; }
.list-3 { width: 600px; }

如果將上面的例子換為@for $num from 1 to 3會出現什麼結果呢

@for $num from 1 to 3 {
  .list-#{$num} { width: 200px * $num; }
}

//編譯為

.list-1 { width: 200px; }
.list-2 { width: 400px; }

我們會發現：當使用 through 時，條件範圍包含 與 的值，而使用 to 時條件範圍只包含 的值不包含 的值。
另外，$var 可以是任何變數； 和 必須是整數值。

@while：指令重複輸出格式直到表示式返回結果為 false。

$num: 6;
@while $num > 0 {
  .list-#{$num} { width: 200px * $num; }
  $num: $num - 2;
}

//編譯為

.list-6 { width: 1200px; }
.list-4 { width: 800px; }
.list-2 { width: 400px; }

@each：指令的格式是 varin<list>,$varin<list>,$var 可以是任何變數名， 是一連串的值，也就是值列表。@each 將變數 $var 作用於值列表中的每一個專案，然後輸出結果。

@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}
//編譯為

.a { background-image: url("/image/a.jpg"); }
.b { background-image: url("/image/b.jpg"); }
.c { background-image: url("/image/c.jpg"); }

自定義函式

在sass中，用於可以根據自己的具體需要編寫函式

@function count($n) {
  @return $n * 100;
}
div {
  width: count(5px);
}

//編譯後

div { width: 500px; }