表达式
- @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; }
