目录
Sass中文文档
控制指令和表达式
SassScript支持一些基本控制指令和表达式,比如仅在在某些条件下包含样式,或者包括相同的样式几次变化。
注意: 控制指令是一项高级功能,日常编写过程中并不常用到,主要在 mixins(混合)指令中使用,尤其是像Compass这样的库。
if()
内置的if()函数可让您在一个条件处理分支并返回两种可能结果。它可以在任何脚本上下文中使用。if函数只判断相对应的一个参数并且返回 — 这使您可以引用已经定义的或者可以计算的变量,否则将导致错误(例如,除以零)。
if(true, 1px, 2px) => 1px if(false, 1px, 2px) => 2px
@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; }
@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; }
@for
@for指令重复输出一组样式。对于每次重复,计数器变量用于调整输出结果。该指令有两种形式:@for $var from <start> through <end> 和 @for $var from <start> to <end>。注意关键字through 和 to的区别。$var可以是任何变量名,比如$i;<start> 和 <end>是应该返回整数的SassScript表达式。当<start>比<end>大的时候,计数器将递减,而不是增量。
@for语句将设置$var为指定的范围内每个连续的数值,并且每一次输出的嵌套样式中使用$var的值。对于from ... through的形式,范围包括<start>和<end>的值,但from ... to的形式从<start>开始运行,但不包括<end>的值。使用through语法,
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }
编译为:
.item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
@each
@each指令通常格式是@each $var in <list or map>。$var可以是任何变量名,像$length 或者 $name,和<list or map>是一个返回列表(list)或 map 的 SassScript 表达式。
@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'); }
多重赋值(Multiple Assignment)
@each指令也可以使用多个变量,格式为@each $var1,$var2, ... in <list>。如果<list>是列表(list)中的列表,子列表中的每个元素被分配给各自的变量。例如:
@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; }
因为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
@while 指令重复输出嵌套样式,直到SassScript表达式返回结果为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; }上一篇: @规则 和 指令 下一篇: 混入指令