英文原文：Sass Basics: Control Directives and Expressions
譯者：南北
譯文地址：
http://www.w3cplus.com/preprocessor/sass-basics-control-directives-expressions.html
如果你深入地使用過(guò) Sass，那么一定會(huì)接觸過(guò) mixin。一個(gè)獨(dú)立的 mixin 往往聚合了大量的控制指令來(lái)實(shí)現(xiàn)復(fù)雜的功能姨丈。
在本文中我們就將這些控制指令和表達(dá)式做一些講解和實(shí)踐九昧。也許你在開(kāi)發(fā)中不見(jiàn)得會(huì)用到它們，但是熟悉一下這些指令叠蝇，可能會(huì)有意想不到的收獲璃岳！
if()
if() 是 Sass 的一個(gè)內(nèi)建函數(shù)，與之相似的 @if 則是一個(gè)內(nèi)建指令悔捶。if() 用來(lái)做條件判斷并返回特定值铃慷，示例如下：
@mixin test($condition) {
$color: if($condition, blue, red);
color:$color
}
.firstClass {
@include test(true);
}
.secondClass {
@include test(false);
}
編譯結(jié)果：
.firstClass {
color: blue;
}
.secondClass {
color: red;
}
在上例中，if() 函數(shù)內(nèi)的三個(gè)參數(shù)分別代表：測(cè)試條件蜕该，測(cè)試成功返回值犁柜，測(cè)試失敗返回值（除了 false 和 null 之外的所有測(cè)試條件都被視為測(cè)試成功）。如果使用數(shù)字作為上述示例的條件蛇损，同樣會(huì)返回測(cè)試成功的值：
.firstClass {
@include test(1);
}
@if
@if 后跟一個(gè)表達(dá)式赁温，如果表達(dá)式的結(jié)果為 true，則返回特定的樣式淤齐，示例如下：
@mixin txt($weight) {
color: white;
@if $weight == bold { font-weight: bold;}
}
.txt1 {
@include txt(none);
}
.txt2 {
@include txt(bold);
}
編譯結(jié)果：
.txt1 {
color: white;
}
.txt2 {
color: white;
font-weight: bold;
}
此外股囊，我們可以使用 @if ... @else if ... @else 結(jié)構(gòu)來(lái)處理多個(gè)條件，示例如下：
@mixin txt($weight) {
color: white;
@if $weight == bold { font-weight: bold;}
@else if $weight == light { font-weight: 100;}
@else if $weight == heavy { font-weight: 900;}
@else { font-weight: normal;}
}
.txt1 {
@include txt(bold);
}
.txt2 {
@include txt(light);
}
.txt3 {
@include txt(heavy);
}
.txt4 {
@include txt(none);
}
.txt5 {
@include txt(normal)
}
編譯結(jié)果：
.txt1 {
color: white;
font-weight: bold;
}
.txt2 {
color: white;
font-weight: 100;
}
.txt3 {
color: white;
font-weight: 900;
}
.txt4 {
color: white;
font-weight: normal;
}
.txt5 {
color: white;
font-weight: normal;
}
這里的.txt4 和 .txt5 是用來(lái)向各位演示 @if 的解析機(jī)制更啄。在 .txt1 中稚疹，如果不傳入 bold，那么就不會(huì)生成 font-weight 相關(guān)的樣式祭务。
@for
@for 指令常用于循環(huán)輸出内狗。@for 有兩種使用方式：from start through end 和 from start to end，兩者的區(qū)別在于义锥，前者遍歷的范圍是 [start, end], 而后者的遍歷范圍是 [start, end-1]柳沙。在 @for 循環(huán)中使用一個(gè)固定變量來(lái)替代遍歷到的元素。如果你想實(shí)現(xiàn)從大到小的遍歷拌倍，只需讓 start 大于 end 即可赂鲤。下面是 @for 的一個(gè)簡(jiǎn)單示例：
@for $i from 1 through 4 {
.col-#{$i} { width: 100/4 * $i + %;}
}
使用上面的這個(gè)例子噪径，我們可以創(chuàng)建一套簡(jiǎn)單的柵格系統(tǒng)，編譯結(jié)果如下：
.col-1 {
width: 25%;
}
.col-2 {
width: 50%;
}
.col-3 {
width: 75%;
}
.col-4 {
width: 100%;
}
從上面的示例中数初，我們綜合了 Sass 的循環(huán)找爱、變量、計(jì)算等多重功能泡孩。
@each
@each 指令同樣可以用于循環(huán)輸出车摄，和 @for 的差別在于，@each 通過(guò)遍歷 list 或者 map 實(shí)現(xiàn)循環(huán)輸出：
@each $usr in bob, john, bill, mike {
.#{$usr}-avatar {
background-image: url('/img/#{$usr}.png');
}
}
@each 后面的 $usr 變量用于保存每次遍歷到的元素仑鸥，然后使用差值語(yǔ)法（#{var}）來(lái)拼接正確的圖片路徑吮播，編譯結(jié)果如下：
.bob-avatar {
background-image: url("/img/bob.png");
}
.john-avatar {
background-image: url("/img/john.png");
}
.bill-avatar {
background-image: url("/img/bill.png");
}
.mike-avatar {
background-image: url("/img/mike.png");
}
如果遍歷的對(duì)象是一個(gè) map，那么我們就可以使用兩個(gè)變量來(lái)存儲(chǔ)元素的 key 和 value锈候，示例如下：
$ppl: ( usr1:bob, usr2:john, usr3:bill, usr4:mike );
@each $key, $usr in $ppl {
.#{$usr}-avatar {
background-image: url('/img/#{$usr}.png');
}
}
此外薄料，針對(duì)多個(gè)列表的遍歷，我們也可以使用多個(gè)參數(shù)來(lái)保存相應(yīng)的元素：
$alt: alert, yellow, red;
$sub: submit, white, green;
$bck: back, blue, transparent;
@each $type, $txt, $back in $alt,$sub,$bck {
.#{$type}-button {
color: $txt;
background-color: $back;
}
}
編譯結(jié)果如下：
.alert-button {
color: yellow;
background-color: red;
}
.submit-button {
color: white;
background-color: green;
}
.back-button {
color: blue;
background-color: transparent;
}
@while
@while 指令也可以用于循環(huán)輸出泵琳，它后面跟一個(gè)表達(dá)式摄职，如果表達(dá)式結(jié)果為 false，則停止循環(huán)體获列。下面使用 @while 來(lái)重寫上述的 @for 示例：
$x:1;
@while $x < 13 {
.col-#{$x} { width: 100/12 * $x;}
$x: $x + 1;
};
在上面的示例中谷市，我們用一個(gè)表達(dá)式來(lái)控制 @while 指令的執(zhí)行，表達(dá)式中有一個(gè)變量 $x击孩，該變量一方面用于插值計(jì)算迫悠，另一方面在循環(huán)體內(nèi)執(zhí)行累加，最終當(dāng) $x < 13 的結(jié)果為 false 時(shí)巩梢，程序就會(huì)推出 @while循環(huán)创泄。
總結(jié)
Sass 的諸多特性讓前端開(kāi)發(fā)變得無(wú)比輕松，雖然 Sass 中的指令很強(qiáng)大括蝠，但是如果不是構(gòu)建一個(gè)大象框架鞠抑，往往并不能感覺(jué)到其中的美妙。隨著對(duì) Sass 的了解越來(lái)越深入忌警，總有一天你會(huì)用到這些指令的 _搁拙。
