五、控制指令和表达式

表达式

• @if：@if 指令需要一个SassScript表达和嵌套在它下面要使用的样式，如果表达式返回值不为 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; }

• @for：指令重复输出一组样式，该指令有两种形式：

@for $var from {start} through {end}：范围包括{start}和{end}的值
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
编译为：

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

@for $var from {start} to {end}：从{start}开始运行，但不包括{end}的值
@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}
编译为：

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

• @each：

@each 规则将$var设置为列表（list）或 map 中的每个项目，输出样式中包含使用$var的值

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
编译为：

.puma-icon { background-image: url('/images/puma.png'); }
.sea-slug-icon { background-image: url('/images/sea-slug.png'); }
.egret-icon { background-image: url('/images/egret.png'); }
.salamander-icon { background-image: url('/images/salamander.png'); }

• @each：多重赋值

@each $animal, $color, $cursor in (puma, black, default),(sea-slug, blue, pointer),(egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
编译为：

.puma-icon { background-image: url('/images/puma.png'); border: 2px solid black; cursor: default; }
.sea-slug-icon { background-image: url('/images/sea-slug.png'); border: 2px solid blue; cursor: pointer; }
.egret-icon { background-image: url('/images/egret.png'); border: 2px solid white; cursor: move; }

• @each：maps

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}
编译为：

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

• @while：指令重复输出嵌套样式，直到SassScript表达式返回结果为false

$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; }