控制指令

if() 條件

當(dāng)@if的表達(dá)式返回值不是 false 或者 null時(shí)膝捞，條件成立哈蝇，輸出括號(hào)內(nèi)的代碼

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

@if,聲明后可以跟多個(gè) @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ù)輸出格式戚哎，每次按要求（變量的值）對(duì)輸出結(jié)果做出變動(dòng)味赃。這個(gè)指令包含兩種格式：@for var from <start> to <end>滔悉，區(qū)別在于 through 與 to 的含義：當(dāng)使用 through 時(shí)，條件范圍包含 <start> 與 <end> 的值单绑，而使用 to 時(shí)條件范圍只包含 <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可以通過(guò)設(shè)置多重變量來(lái)進(jìn)行循環(huán)多個(gè)列表

@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ù)輸出格式直到表達(dá)式返回結(jié)果為 false蜗帜。這樣可以實(shí)現(xiàn)比 @for 更復(fù)雜的循環(huán)

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

混合指令

混合指令（Mixin）用于定義可重復(fù)使用的樣式恋拷，避免了使用無(wú)語(yǔ)意的 class，比如 .float-left厅缺∈吖耍混合指令可以包含所有的 CSS 規(guī)則宴偿，絕大部分 Sass 規(guī)則，甚至通過(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í)候舷胜，按照變量的格式娩践，通過(guò)逗號(hào)分隔，將參數(shù)寫進(jìn)圓括號(hào)里烹骨。引用指令時(shí)翻伺，按照參數(shù)的順序，再將所賦的值對(duì)應(yīng)寫進(jìn)括號(hào)

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

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

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

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

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

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

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

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

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

混合指令同樣可以實(shí)現(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)容

在引用混合樣式的時(shí)候峦树，可以先將一段代碼導(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ù)和默認(rèn)參數(shù)