@each指令形式:
@each 指令同樣可以用于循環(huán)輸出已球，和 @for 的差別在于邻耕，@each 通過遍歷 list 或者 map 實(shí)現(xiàn)循環(huán)輸出:
list: 指列表
map: 可以包含若干值的對(duì)象類型,使用()包圍一個(gè)map磁玉，里面的鍵值用逗號(hào)隔開身冬，鍵和值可以是任何的Sass數(shù)據(jù)類型澈歉，盡管一個(gè)值可以用在多個(gè)鍵上怎憋，但是通過一個(gè)鍵我們必須只能找到一個(gè)值。
注: <code>map不能直接在css中使用,如果把一個(gè)map賦值給一個(gè)元素會(huì)報(bào)錯(cuò)岸蜗。</code>
奉上一段例子!
- list:
@each $usr in a, b, c, d {
.#{$usr}-images {
background-image: url('/img/#{$usr}.png');
}
}
@each 后面的 $usr 變量用于保存每次遍歷到的元素尉咕，然后使用差值語法（#{var}）來拼接正確的圖片路徑編譯后的結(jié)果:
.a-images {
background-image: url("/img/a.png"); }
.b-images {
background-image: url("/img/b.png"); }
.c-images {
background-image: url("/img/c.png"); }
.d-images {
background-image: url("/img/d.png"); }
如果遍歷的對(duì)象是 <code>一個(gè)</code> map，那么我們就可以使用兩個(gè)變量來存儲(chǔ)元素的 key 和 value璃岳，示例如下：
$params: ( usr1:a, usr2:b, usr3:c, usr4:d );
@each $key, $usr in $params {
.#{$usr}-images {
background-image: url('/img/#{$usr}.png');
}
}
此外年缎，針對(duì)多個(gè)列表的遍歷，我們也可以使用多個(gè)參數(shù)來保存相應(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)體犁柜。
$x:1;
@while $x < 5 {
.col-#{$x} { width: 100/4 * $x +px;}
$x: $x + 1;
};
編譯結(jié)果為:
.col-1 {
width: 25px; }
.col-2 {
width: 50px; }
.col-3 {
width: 75px; }
.col-4 {
width: 100px; }
我們用一個(gè)表達(dá)式來控制 @while 指令的執(zhí)行洲鸠，表達(dá)式中有一個(gè)變量 $x，該變量一方面用于插值計(jì)算馋缅，另一方面在循環(huán)體內(nèi)執(zhí)行累加扒腕，最終當(dāng) $x < 13 的結(jié)果為 false 時(shí)，程序就會(huì)推出 @while 循環(huán)
