@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 循环
