Sass null

What You’ll Learn

Sass null means a value is missing. This page covers where null comes from, how it is omitted from CSS, why it is falsey, optional mixin APIs, and five compiled examples.

What Is null?

Official docs: 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.

• Common sources: missing map keys, missing substrings, no parent selector (& at root).
• In a CSS list, null items are dropped.
• As a property value, null removes that property entirely.
• It is falsey—same idea as false in conditions.

📝 Syntax

$missing: null;

$maybe-family: map.get($fonts, "sans"); // null if key missing

.button {
  border-radius: $radius; // omitted from CSS when $radius is null
}

🔍 Where null Comes From

🗑️ How null Affects CSS

Official docs describe two important behaviors:

• In a list — a null entry is omitted. Example: font: 18px bold null becomes font: 18px bold;.
• As a property value — the whole property is omitted. Nested font: { family: null } simply does not emit font-family.

✅ null Is Falsey

Official docs: null counts as false for rules and operators that take booleans. That makes values that might be null easy to use in @if and if(). See also Sass Booleans.

@if string.index($label, " ") {
  // runs only when a space was found (index is a number, not null)
}

$pad: if($compact, 0.5rem, 1rem);

Examples Gallery

Each example shows a practical null behavior. Open View Compiled CSS for verified output.

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

$root-parent: &; // null at the stylesheet root

@mixin probe-parent() {
  --inside: #{meta.inspect(&)};
}

.sources {
  --idx: #{meta.inspect(string.index("Helvetica Neue", "Roboto"))};
  --get: #{meta.inspect(map.get(("large": 20px), "small"))};
  --root-parent: #{meta.inspect($root-parent)};
  @include probe-parent;
}

.sources {
  --idx: null;
  --get: null;
  --root-parent: null;
  --inside: (.sources,);
}

@use "sass:map";

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

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

h3 {
  font: 18px bold;
}

@use "sass:map";

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

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

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

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

@use "sass:meta";

@mixin button($bg: #036, $radius: null, $shadow: null) {
  background: $bg;
  border: none;
  color: #fff;
  border-radius: $radius;
  box-shadow: $shadow;
}

.btn-plain {
  @include button;
}

.btn-fancy {
  @include button($radius: 8px, $shadow: 0 2px 6px rgba(0, 0, 0, 0.2));
}

.check {
  --a: #{meta.inspect(null == null)};
  --b: #{meta.inspect(if(null, "yes", "no"))};
  --c: #{meta.type-of(null)};
}

.btn-plain {
  background: #036;
  border: none;
  color: #fff;
}

.btn-fancy {
  background: #036;
  border: none;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.check {
  --a: true;
  --b: "no";
  --c: null;
}

🚀 Real-World Use Cases

• Optional mixin properties — radius, shadow, outline only when set.
• Token lookups — missing map keys quietly skip a slot in a shorthand.
• Parent-aware mixins — branch on whether & exists.
• Search helpers — treat string.index / list.index misses as falsey.
• Clean CSS — avoid emitting empty or invalid declarations.

⚠️ Common Pitfalls

• Expecting empty string behavior — "" is truthy and still emits in CSS; null does not.
• Forgetting property omission — color: null removes the property, it does not write color: null.
• Assuming & is always a selector — at the root it is null.
• Not handling missing keys — map.get returns null; plan for that.
• Confusing with CSS unset / initial — those are CSS keywords; Sass null means “do not emit.”

💡 Best Practices