九、sass 控制指令

1.if()

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}

编译后：

p {
  border: 1px solid; }

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如：

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译后：

p {
  color: green; }

2.for()

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from through ，或者 @for $var from to ，区别在于 through与 to 的含义：当使用 through 时，条件范围包含 与 的值，而使用 to 时条件范围只包含 的值不包含 的值。另外，$var 可以是任何变量，比如 $i； 和 必须是整数值。

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译后：

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

3.@each

@each 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而 是一连串的值，也就是值列表。

@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果，例如：

@each $animal in lx, lhf, ljr, zjr,cxb {
  .#{$animal}-head-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

编译后：

.lx-head-icon {
  background-image: url("/images/lx.png"); }

.lhf-head-icon {
  background-image: url("/images/lhf.png"); }

.ljr-head-icon {
  background-image: url("/images/ljr.png"); }

.zjr-head-icon {
  background-image: url("/images/zjr.png"); }

.cxb-head-icon {
  background-image: url("/images/cxb.png"); }

多个list

@each $animal1,$animal2 in (lx,blue), (lhf,white), (ljr,orange), (zjr,aliceblue),(cxb,red) {
  .#{$animal1}-head-icon {
    background-image: url('/images/#{$animal1}.png');
    color: $animal2;
  }
}

编译后

.lx-head-icon {
  background-image: url("/images/lx.png");
  color: blue; }

.lhf-head-icon {
  background-image: url("/images/lhf.png");
  color: white; }

.ljr-head-icon {
  background-image: url("/images/ljr.png");
  color: orange; }

.zjr-head-icon {
  background-image: url("/images/zjr.png");
  color: aliceblue; }

.cxb-head-icon {
  background-image: url("/images/cxb.png");
  color: red; }

4.@while

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

编译后：

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }