Sass Equality Operators

What You’ll Learn

Sass equality operators answer “are these two values the same?” Use == for equal and != for not equal. This page covers numbers (including units), strings, colors, lists, maps, booleans, and five compiled examples.

What Are Equality Operators?

Official docs: equality operators return whether or not two values are the same. They are written == (equal) and != (not equal). Two values are equal if they are the same type and the same value—and “same value” depends on the type.

• Results are booleans: true or false.
• Most often used inside @if, guards, and helpers.
• Comparison happens when Sass compiles—not in the browser.
• Pair with relational operators (>, <, …) for ordering numbers.

📝 Syntax

// Equal — true when both sides match
$expression-a == $expression-b

// Not equal — true when the sides differ
$expression-a != $expression-b

Operators

Return value

🎨 How Equality Works By Type

⚖️ Numbers, Units & Unitless Values

🛠 Compatibility

This is about Sass compilers, not browsers. Equality is resolved at compile time.

Prefer current Dart Sass so unit rules match the official docs.

Examples Gallery

Each example uses == / != at compile time. Open View Compiled CSS for verified output (booleans shown with meta.inspect).

@use "sass:meta";

.probe {
  --same: #{meta.inspect(1px == 1px)};
  --diff-unit: #{meta.inspect(1px != 1em)};
  --unitless: #{meta.inspect(1 != 1px)};
  --convert: #{meta.inspect(96px == 1in)};
}

.probe {
  --same: true;
  --diff-unit: true;
  --unitless: true;
  --convert: true;
}

@use "sass:meta";

.probe {
  --q-u: #{meta.inspect("Helvetica" == Helvetica)};
  --diff: #{meta.inspect("Helvetica" != "Arial")};
}

.probe {
  --q-u: true;
  --diff: true;
}

@use "sass:meta";

.probe {
  --hsl-hex: #{meta.inspect(hsl(34, 35%, 92.1%) == #f2ece4)};
  --alpha: #{meta.inspect(rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8))};
}

.probe {
  --hsl-hex: true;
  --alpha: true;
}

@use "sass:meta";

.probe {
  --same: #{meta.inspect((5px 7px 10px) == (5px 7px 10px))};
  --vals: #{meta.inspect((5px 7px 10px) != (10px 14px 20px))};
  --sep: #{meta.inspect((5px 7px 10px) != (5px, 7px, 10px))};
  --brack: #{meta.inspect((5px 7px 10px) != [5px 7px 10px])};
}

.probe {
  --same: true;
  --vals: true;
  --sep: true;
  --brack: true;
}

@use "sass:meta";

$theme: ("venus": #998099, "nebula": #d2e1dd);
$mode: "dark";

.card {
  @if $mode == "dark" {
    --ok: #{meta.inspect(true)};
    background: #111;
  } @else {
    background: #fff;
  }
  --map-eq: #{meta.inspect($theme == ("venus": #998099, "nebula": #d2e1dd))};
  --bool: #{meta.inspect(true != false)};
  --nullish: #{meta.inspect(null != false)};
}

.card {
  --ok: true;
  background: #111;
  --map-eq: true;
  --bool: true;
  --nullish: true;
}

🚀 Real-World Use Cases

• Theme switches — @if $theme == "dark" for alternate palettes.
• Feature flags — emit rules only when a flag is true.
• Token guards — reject unexpected string or number options.
• Color checks — confirm two tokens resolve to the same color.
• List shape checks — ensure a helper received a space- or comma-separated list.

⚠️ Common Pitfalls

• Unitless vs with units — in Dart Sass, 1 != 1px.
• List separators — space lists are not equal to comma lists.
• Brackets — [1 2] is not equal to (1 2).
• null vs false — they are not equal.
• Expecting browser runtime — == never appears in CSS.

💡 Best Practices