null

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

Playground

SCSS Syntax

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

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

Sass Syntax

@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。

¥If a list contains a null, that null is omitted from the generated CSS.

Playground

SCSS Syntax

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

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

Sass Syntax

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

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

CSS Output

h3 {
  font: 18px bold;
}

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

¥If a property value is null, that property is omitted entirely.

Playground

SCSS Syntax

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

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

Sass Syntax

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

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

CSS Output

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

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

¥null is also falsey, which means it counts as false for any rules or operators that take booleans. This makes it easy to use values that can be null as conditions for @if and if().

Playground

SCSS Syntax

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

Sass Syntax

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

CSS Output

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