Null value behavior in SASS

Introduction

Null values in Sass help you control when to keep or ignore styles. They let you say "no value" clearly.

When you want to skip a CSS property if a value is not set.

When you want to check if a variable has a value before using it.

When you want to create flexible mixins that only add styles if values exist.

When you want to reset or remove a value in a map or list.

When you want to avoid errors by testing if a value is null before using it.

Syntax

SASS

$variable: null;

Null means the variable has no value.

You can test null with if($variable == null) or if($variable != null).

Examples

If $color is null, the color property will not be output in CSS.

SASS

$color: null;

.selector {
  color: $color;
}

Since $padding has a value, it will be included in the CSS output.

SASS

$padding: 10px;

.selector {
  padding: $padding;
}

The mixin adds height only if $height is not null.

SASS

@mixin box($width, $height: null) {
  width: $width;
  @if $height != null {
    height: $height;
  }
}

.box1 {
  @include box(100px);
}

.box2 {
  @include box(100px, 200px);
}

Sample Program

This Sass code uses null values to decide which colors to apply. If a background color is null, it uses a default or transparent.

SASS

@use "sass:meta";

$bg-color: null;
$text-color: #333333;

.container {
  background-color: if($bg-color == null, transparent, $bg-color);
  color: $text-color;
}

.button {
  $btn-bg: null;
  background-color: if($btn-bg != null, $btn-bg, blue);
  padding: 1rem;
  border-radius: 0.5rem;
}

Important Notes

Null values do not output CSS properties when used directly.

Use if() or @if to check for null and provide fallback values.

Null helps keep your CSS clean by avoiding empty or unwanted properties.

Summary

Null means "no value" in Sass.

Null values prevent CSS properties from being output.

Use null checks to add styles only when values exist.