布尔值是逻辑值true和false。 除了它们的文字形式，布尔值还由 equality 和 relational 运算符以及许多内置函数返回，例如 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
您可以使用 boolean operators 处理布尔值。 如果_both_ 边为 true，则 and 运算符返回 true，如果_either_ 边为 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
Using Booleans
You can use booleans to choose whether or not to do various things in Sass. The @if rule evaluates a block of styles if its argument is true:
@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);
}
if() 函数 如果其参数为 true 则返回一个值，如果其参数为 false 则返回另一个值：
@debug if(true, 10px, 30px); // 10px
@debug if(false, 10px, 30px); // 30px
真实与虚假
在允许使用 true 或 false 的任何地方，您也可以使用其他值。 值 false 和 null 是 falsey，这意味着 Sass 认为它们表示虚假并导致条件失败。 每个其他值都被认为是 truthy，因此 Sass 认为它们像true一样工作并导致条件成功。
例如，如果你想检查一个字符串是否包含空格，你可以只写 string.index($string, " ")。 如果未找到字符串，string.index() 函数 返回 null，否则返回一个数字。
⚠️ 注意！
有些语言认为更多的值是错误的，而不仅仅是false和null。 Sass 不是那些语言之一！ 空字符串、空列表和数字0在 Sass 中都是真值。
Null
值null是其类型的唯一值。 它表示缺少值，通常由 functions 返回以指示缺少结果。
@use "sass:map";
@use "sass:string";
@debug string.index("Helvetica Neue", "Roboto"); // null
@debug map.get(("large": 20px), "small"); // null
@debug &; // null
如果 list 包含null，则生成的 CSS 中会省略该null。
$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas");
h3 {
font: 18px bold map-get($fonts, "sans");
}
如果属性值为null，则该属性将被完全省略。
$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas");
h3 {
font: {
size: 18px;
weight: bold;
family: map-get($fonts, "sans");
}
}
null 也是 falsey，这意味着对于任何规则或 operators采用布尔值。 这使得使用可以为 null 的值作为 @if 和 if()。
@mixin app-background($color) {
#{if(&, '&.app-background', '.app-background')} {
background-color: $color;
color: rgba(#fff, 0.75);
}
}
@include app-background(#036);
.sidebar {
@include app-background(#c6538c);
}