W3cubDocs

/Sass

null

The value null is the only value of its type. It represents the absence of a value, and is often returned by functions to indicate the lack of a result.

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

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

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

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

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

h3 {
  font: 18px bold map-get($fonts, "sans");
}
$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas")

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

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

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

h3 {
  font: {
    size: 18px;
    weight: bold;
    family: map-get($fonts, "sans");
  }
}
$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 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().

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

© 2006–2022 the Sass team, and numerous contributors
Licensed under the MIT License.
https://sass-lang.com/documentation/values/null