Sass的表达式和控制命令 @each 篇 + @while 篇

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