布尔值
布尔值是逻辑值 true 和 false。除了它们的字面形式外，布尔值还由相等性和关系运算符以及许多内置函数（如math.comparable()和map.has-key()）返回。
游乐场SCSS 语法
@use "sass:math";
@debug 1px == 2px; // false
@debug 1px == 1px; // true
@debug 10px < 3px; // false
@debug math.comparable(100px, 3in); // true
Sass 语法
@use "sass:math"
@debug 1px == 2px // false
@debug 1px == 1px // true
@debug 10px < 3px // false
@debug math.comparable(100px, 3in) // true
您可以使用布尔运算符处理布尔值。and 运算符如果两边都为 true 则返回 true，or 运算符如果任一边为 true 则返回 true。not 运算符返回单个布尔值的相反值。
游乐场SCSS 语法
@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 语法
@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 中执行各种操作。@if 规则如果其参数为 true 则评估样式块
游乐场SCSS 语法
@use "sass:math";
@mixin avatar($size, $circle: false) {
width: $size;
height: $size;
@if $circle {
border-radius: math.div($size, 2);
}
}
.square-av {
@include avatar(100px, $circle: false);
}
.circle-av {
@include avatar(100px, $circle: true);
}
Sass 语法
@use "sass:math"
@mixin avatar($size, $circle: false)
width: $size
height: $size
@if $circle
border-radius: math.div($size, 2)
.square-av
@include avatar(100px, $circle: false)
.circle-av
@include avatar(100px, $circle: true)
CSS 输出
.square-av {
width: 100px;
height: 100px;
}
.circle-av {
width: 100px;
height: 100px;
border-radius: 50px;
}
if() 函数如果其参数为 true 则返回一个值，如果其参数为 false 则返回另一个值
真值和假值真值和假值永久链接
在允许使用 true 或 false 的任何地方，您也可以使用其他值。值 false 和null是假值，这意味着 Sass 将它们视为表示虚假并导致条件失败。每个其他值都被认为是真值，因此 Sass 将它们视为类似于 true 并导致条件成功。
例如，如果要检查字符串是否包含空格，则只需编写 string.index($string, " ")。string.index() 函数如果未找到字符串则返回 null，否则返回数字。
⚠️ 注意！
某些语言认为比 false 和 null 更多的值为假值。Sass 不是这些语言之一！空字符串、空列表和数字 0 在 Sass 中都是真值。