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
プレイグラウンド

Sass 構文

@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");
}
プレイグラウンド

Sass 構文

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

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

CSS 出力

h3 {
  font: 18px bold;
}

プロパティ値が null の場合、そのプロパティは完全に省略されます。

プレイグラウンド

SCSS 構文

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

h3 {
  font: {
    size: 18px;
    weight: bold;
    family: map-get($fonts, "sans");
  }
}
プレイグラウンド

Sass 構文

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

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

CSS 出力

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

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);
}
プレイグラウンド

Sass 構文

@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 出力

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