null

值 null 是其类型中唯一的那个。它表示值的缺失，并且通常由 函数 返回以指示结果的缺失。

游乐场

SCSS 语法

@use "sass:map";
@use "sass:string";

@debug string.index("Helvetica Neue", "Roboto"); // null
@debug map.get(("large": 20px), "small"); // null
@debug &; // null

如果一个 列表 包含 null，则该 null 将从生成的 CSS 中省略。

游乐场

SCSS 语法

$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas");

h3 {
  font: 18px bold map-get($fonts, "sans");
}

如果属性值为 null，则该属性将完全省略。

游乐场

SCSS 语法

$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas");

h3 {
  font: {
    size: 18px;
    weight: bold;
    family: map-get($fonts, "sans");
  }
}

null 也是 假值，这意味着对于任何采用布尔值的规则或 运算符，它都被视为 false。这使得可以轻松地将可能为 null 的值用作 @if 和 if() 的条件。

游乐场

SCSS 语法

@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);
}