控制指令

if() 條件

當(dāng)@if的表達式返回值不是 false 或者 null時，條件成立，輸出括號內(nèi)的代碼

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}

@if,聲明后可以跟多個 @else if聲明

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

@for 循環(huán)值

@for 指令可以在限制的范圍內(nèi)重復(fù)輸出格式，每次按要求（變量的值）對輸出結(jié)果做出變動。這個指令包含兩種格式：@for var from <start> to <end>，區(qū)別在于 through 與 to 的含義：當(dāng)使用 through 時，條件范圍包含 <start> 與 <end> 的值，而使用 to 時條件范圍只包含 <start> 的值不包含 <end> 的值。另外，i；<start> 和 <end> 必須是整數(shù)值。

@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}

@each 循環(huán)列表

@each 指令的格式是 var 可以是任何變量名，比如 name，而 <list> 是一連串的值，也就是值列表

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

@each可以通過設(shè)置多重變量來進行循環(huán)多個列表

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

@while 循環(huán)

@while 指令重復(fù)輸出格式直到表達式返回結(jié)果為 false。這樣可以實現(xiàn)比 @for 更復(fù)雜的循環(huán)

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

混合指令

混合指令（Mixin）用于定義可重復(fù)使用的樣式，避免了使用無語意的 class，比如 .float-left。混合指令可以包含所有的 CSS 規(guī)則，絕大部分 Sass 規(guī)則，甚至通過參數(shù)功能引入變量，輸出多樣化的樣式

定義混合指令

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

引用混合樣式@include

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

參數(shù)

參數(shù)用于給混合指令中的樣式設(shè)定變量，并且賦值使用。在定義混合指令的時候，按照變量的格式，通過逗號分隔，將參數(shù)寫進圓括號里。引用指令時，按照參數(shù)的順序，再將所賦的值對應(yīng)寫進括號

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

參數(shù)可以設(shè)置默認值 ，如下

@mixin sexy-border($color, $width: 1in)

在引用時可以設(shè)置關(guān)鍵詞 如下

@include sexy-border($color: blue, $width: 2in)

當(dāng)不能確定指令需要使用多少個參數(shù)時，可以設(shè)置參數(shù)變量 如下

@mixin box-shadow($shadows...)

引用混合指令時，同樣可以使用參數(shù)變量 如下

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

混合指令同樣可以實現(xiàn)參數(shù)的傳遞 如下

@mixin wrapped-stylish-mixin($args...) {
  font-weight: bold;
  @include stylish-mixin($args...);
}
.stylish {
  @include wrapped-stylish-mixin(#00ff00, $width: 100px);
}

向混合樣式中導(dǎo)入內(nèi)容

在引用混合樣式的時候，可以先將一段代碼導(dǎo)入到混合指令中，然后再輸出混合樣式，額外導(dǎo)入的部分將出現(xiàn)在 @content 標(biāo)志的地方

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

函數(shù)指令

基本用法

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }

函數(shù)一樣可以使用 關(guān)鍵詞參數(shù)和默認參數(shù)