@if、@else

@if的格式为@if <expression> { ... },并控制是否对其块进行计算(包括以CSS形式输出的任何样式)。表达式通常返回true或false - 如果表达式返回true,则对块求值,如果表达式返回false,则不求值。

@else

@if规则后面可以有一个@else规则,写为@else { ... }。如果@if表达式返回false,则计算此规则的块。

@else if

您还可以选择是否计算@else规则的块,可写为@else if <expression> { ... }。 当前面的@if表达式返回false,而@else表达式返回true时,才会对该块求值。

事实上,您可以在@if之后链接尽可能多的@else if。这些链中第一个返回true,后面的块就不会计算了。如果链的末尾有一个普通的@else,那么如果其他块都失败了,那么它的块将被计算。

真值与否定值

在任何允许truefalse的地方,也可以使用其他值。值falsenull表示否定值(falsey),这意味着Sass认为它们表示错误并导致条件失败。所有其他的价值都被认为是真值truthy(),所以Sass认为它们像true一样工作,并视为条件成功。

例如,如果想检查一个字符串是否包含空格,可使用index($string, " ")。[str-index() function]如果没有找到字符串则返回null,否则返回一个数字。

许多语言不仅仅把falsenull否定值。Sass不在其!空字符串、空列表和数字0在Sass中都是真值。

上次更新: 2019-11-5 4:49:11 PM