Sass null

Beginner
8 min read
Updated: Nov 2026
5 examples
Dart Sass
Sass null value representing absence of a result
Definition

Definition and Usage

null is the only value of its type. It means no value—often returned by functions when there is no result.

Dropped from CSS.

A null inside a list is omitted from the output. A property whose value is null is omitted entirely.

Falsey.

Alongside false, null fails @if conditions. Every other value is truthy. See booleans.

Common sources.

string.index / map.get when missing, and & outside any style rule.

Syntax

Syntax

SCSS
$optional: null;

.button {
  border-radius: $optional;   // property omitted
}

font: 18px bold $optional;    // null dropped from the list

@if $optional {
  // skipped — null is falsey
}

// Helpers that often return null:
// string.index(...), map.get(...), & at the root

Pattern: treat null as “missing” → omit CSS when used as a value → branch with @if when you need a condition.

Reference

Common Patterns

Where null shows up:

PatternResult idea
null literalExplicit absence of a value
map.get / string.index missReturns null
& at stylesheet rootnull (no parent selector)
prop: null;Property omitted from CSS
a b null c in a valuenull item dropped from the list
@if $x when $x is nullCondition fails (falsey)
Code

SCSS Examples

Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).

Example 1 — Official Sources of null

Missing substring, missing map key, and & at the root are all null.

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

$index-missing: string.index("Helvetica Neue", "Roboto") == null;
$map-missing: map.get(("large": 20px), "small") == null;
$parent-at-root: & == null;

.demo {
  --index-missing: #{$index-missing};
  --map-missing: #{$map-missing};
  --parent-at-root: #{$parent-at-root};
}

How It Works

  1. string.index returns null when not found.
  2. map.get returns null for a missing key.
  3. & at the root is null.
  4. Matches the official sources sample idea.

Example 2 — Official: null Dropped From a List

A missing map lookup inside font: leaves the other values.

SCSS
@use "sass:map";

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

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

How It Works

  1. "sans" is not in the map → null.
  2. null is removed from the value list.
  3. 18px bold remain.
  4. Matches the official Sass docs sample.

Example 3 — Official: Property Omitted When null

Nested font-family: null never appears in the CSS.

SCSS
@use "sass:map";

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

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

How It Works

  1. family resolves to null.
  2. font-family is skipped entirely.
  3. size / weight still emit.
  4. Matches the official Sass docs sample.

Example 4 — Official: Falsey & in a Mixin

Outside a rule, & is null—branch accordingly.

SCSS
@mixin app-background($color) {
  @if & {
    &.app-background {
      background-color: $color;
      color: rgba(#fff, 0.75);
    }
  } @else {
    .app-background {
      background-color: $color;
      color: rgba(#fff, 0.75);
    }
  }
}

@include app-background(#036);

.sidebar {
  @include app-background(#c6538c);
}

How It Works

  1. Root include sees & == null.
  2. Nested include sees a real parent.
  3. @if & picks the selector shape.
  4. Matches the official falsey sample idea.

Example 5 — Optional Mixin Args Default to null

Unset options stay out of the CSS.

SCSS
@mixin card($radius: null) {
  padding: 1rem;
  border-radius: $radius;
}

.plain {
  @include card;
}
.round {
  @include card(8px);
}

How It Works

  1. $radius: null by default.
  2. plain omits border-radius.
  3. round passes 8px and emits it.
  4. Clean APIs for optional properties.

Edge Cases & Pitfalls

Most null bugs are expecting CSS output from a missing lookup.

omit

null means “no CSS for that part”

Missing map keys silently drop from lists/properties—check with map.has-key() if that is unexpected.

falsey

Only null and false are falsey

0, "", and () are truthy. See booleans.

&

& is null only outside rules

Inside a style rule, & is the parent selector. See parent selector.

==

Compare with == null when needed

Use $x == null for an explicit missing check; bare @if $x treats any non-null as truthy.

Toolchain

Sass Support

null is a core Sass value on Dart Sass.

FeatureStatus
null literalSupported
Omit from lists / propertiesSupported
Falsey in @ifSupported
Helpers returning nullCommon (map.get, string.index, root &)

Compile with the Dart Sass CLI.

Remember

Key Takeaways

  • null means no value / no result.
  • Omitted from lists and entire properties in CSS.
  • Falsey with false for @if.
  • Great default for optional mixin parameters.

One line: use null for missing results and optional styles so Sass leaves that CSS out.

Practice

Compile Notes

Practical checklist:

checklist.txt
1. Expect null from missing map keys / substrings
2. Use prop: null; to omit a declaration
3. Remember null items vanish from CSS lists
4. Treat null as falsey in @if
5. Default optional mixin args to null

Frequently Asked Questions

null is the only value of its type. It represents the absence of a value and is often returned by functions when there is no result.
That property is omitted entirely from the compiled CSS.
That null is omitted from the generated CSS list, while the other items remain.
Yes. null counts as false for @if and boolean operators—alongside false itself.
Examples include string.index() when a substring is missing, map.get() when a key is missing, and the parent selector & at the root of a stylesheet.
Default optional parameters to null so unset properties are left out of the CSS instead of writing invalid empty values.

Next: Sass Variables

Store reusable values—including optional ones that start as null.

Variables →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass Booleans Sass Variables