null 值

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

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

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


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

scss 语句 css 语句 
$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas");

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

h3 {
  font: 18px bold;
}


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

scss 语句 css 语句 
$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas");

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

h3 {
  font-size: 18px;
  font-weight: bold;
}


null 也是falsey，这意味着它适用于任何采用布尔值的规则或运算符，它都算作 false 。这使得使用可以 null 的值作为 @if 和 if() 条件，变得很null容易。

scss 语句 css 语句 
@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);
}

.app-background {
  background-color: #036;
  color: rgba(255, 255, 255, 0.75);
}

.sidebar.app-background {
  background-color: #c6538c;
  color: rgba(255, 255, 255, 0.75);
}

上篇： 布尔值（Booleans）

下篇： 函数（Functions）