布尔值(Booleans)
布尔值是逻辑值true和false。除了它们的文字形式之外,布尔值还由相等和关系运算符以及许多内置函数(如:math.comparable()和map.has-key())返回。
@use "sass:math"; @debug 1px == 2px; // false @debug 1px == 1px; // true @debug 10px < 3px; // false @debug math.comparable(100px, 3in); // true
您可以使用布尔运算符来处理布尔值。如果两边都是true,则and运算符返回true。如果一侧为true,则or运算符返回true。not运算符返回与单个布尔值相反的值。
@debug true and true; // true @debug true and false; // false @debug true or false; // true @debug false or false; // false @debug not true; // false @debug not false; // true
使用布尔值
您可以使用布尔值,来选择是否,在 Sass 中执行各种操作。如果其参数是true,则该@if规则评估样式块:
| scss 语句 | css 语句 |
|---|---|
@mixin avatar($size, $circle: false) {
width: $size;
height: $size;
@if $circle {
border-radius: $size / 2;
}
}
.square-av {
@include avatar(100px, $circle: false);
}
.circle-av {
@include avatar(100px, $circle: true);
}
|
.square-av {
width: 100px;
height: 100px;
}
.circle-av {
width: 100px;
height: 100px;
border-radius: 50px;
}
|
if()函数在其参数为true时返回一个值,在其参数为false时返回另一个值:
@debug if(true, 10px, 30px); // 10px @debug if(false, 10px, 30px); // 30px
真与假
在任何允许true或false的地方,您也可以使用其他值。false和null的值是falsey,这意味着 Sass 认为它们表示错误并导致条件失败。其他所有值都被认为是真实的,因此 Sass 认为它们的工作方式类似true并导致条件成功。
例如,如果要检查字符串是否包含空格,则只需编写string.index($string," ")。如果未找到该字符串,则该string.index()函数,返回null,否则返回一个数字。
⚠️注意!
一些语言认为更多的值是虚假的,而不仅仅是false和null。Sass 不是其中一种语言!空字符串、空列表和数字 0 ,在 Sass 中都是真值。
