控制指令
- if
$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; } - @for循环有两种方式： $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；<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; }
- @each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。
@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 $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; } // 例子2： @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 指令重复输出格式直到表达式返回结果为 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; }