@each指令形式:
@each 指令同樣可以用于循環輸出，和 @for 的差別在于，@each 通過遍歷 list 或者 map 實現循環輸出:
list: 指列表
map: 可以包含若干值的對象類型,使用()包圍一個map，里面的鍵值用逗號隔開，鍵和值可以是任何的Sass數據類型，盡管一個值可以用在多個鍵上，但是通過一個鍵我們必須只能找到一個值。
注: <code>map不能直接在css中使用,如果把一個map賦值給一個元素會報錯。</code>
奉上一段例子!
- list:
@each $usr in a, b, c, d {
.#{$usr}-images {
background-image: url('/img/#{$usr}.png');
}
}
@each 后面的 $usr 變量用于保存每次遍歷到的元素，然后使用差值語法（#{var}）來拼接正確的圖片路徑編譯后的結果:
.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"); }
如果遍歷的對象是 <code>一個</code> map，那么我們就可以使用兩個變量來存儲元素的 key 和 value，示例如下：
$params: ( usr1:a, usr2:b, usr3:c, usr4:d );
@each $key, $usr in $params {
.#{$usr}-images {
background-image: url('/img/#{$usr}.png');
}
}
此外，針對多個列表的遍歷，我們也可以使用多個參數來保存相應的元素:
$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;
}
}
編譯結果如下:
.alert-button {
color: yellow;
background-color: red; }
.submit-button {
color: white;
background-color: green; }
.back-button {
color: blue;
background-color: transparent; }
@while指令
@while 指令也可以用于循環輸出，它后面跟一個表達式，如果表達式結果為 false，則停止循環體。
$x:1;
@while $x < 5 {
.col-#{$x} { width: 100/4 * $x +px;}
$x: $x + 1;
};
編譯結果為:
.col-1 {
width: 25px; }
.col-2 {
width: 50px; }
.col-3 {
width: 75px; }
.col-4 {
width: 100px; }
我們用一個表達式來控制 @while 指令的執行，表達式中有一個變量 $x，該變量一方面用于插值計算，另一方面在循環體內執行累加，最終當 $x < 13 的結果為 false 時，程序就會推出 @while 循環
