Equality operators return whether two values are the same. Write == for equal and != for not equal. They run at compile time (often inside @if).
96px == 1in is true (compatible units); "Helvetica" == Helvetica is true (same contents).
What “same value” means depends on the type—numbers convert units, strings ignore quote state, lists care about separators and brackets.
In modern Dart Sass, 1 != 1px. Older LibSass-style unitless equality is gone.
$a == $b // true if equal
$a != $b // true if not equal
1px == 1px; // true
1 != 1px; // true (unitless vs px)
96px == 1in; // true (convertible units)
"Helvetica" == Helvetica; // true
null != false; // true
// Typical use:
@if $theme == "dark" { ... }Pattern: compare two values → get a boolean → branch with @if or combine with boolean operators.
How equality works for common types:
| Type | Equal when… |
|---|---|
| Numbers | Same value and units, or equal after unit conversion |
| Strings | Same contents (quoted vs unquoted does not matter) |
| Lists | Same items and same separator / bracket state |
| Maps | Same keys and values |
true / false / null | Only equal to themselves |
Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
Same units, different units, unitless vs px, and conversion.
@use "sass:meta";
.probe {
--a: #{meta.inspect(1px == 1px)};
--b: #{meta.inspect(1px != 1em)};
--c: #{meta.inspect(1 != 1px)};
--d: #{meta.inspect(96px == 1in)};
}Quote state does not break content equality.
@use "sass:meta";
.strings {
--a: #{meta.inspect("Helvetica" == Helvetica)};
--b: #{meta.inspect("Helvetica" != "Arial")};
}Same items can still be unequal if the list form differs.
@use "sass:meta";
.lists {
--a: #{meta.inspect((5px 7px 10px) == (5px 7px 10px))};
--b: #{meta.inspect((5px 7px 10px) != (5px, 7px, 10px))};
--c: #{meta.inspect((5px 7px 10px) != [5px 7px 10px])};
}null Is Not falsetrue, false, and null only equal themselves.
@use "sass:meta";
.bools {
--a: #{meta.inspect(true == true)};
--b: #{meta.inspect(true != false)};
--c: #{meta.inspect(null != false)};
}@ifCompare a theme token and emit different CSS.
$theme: "dark";
.card {
@if $theme == "dark" {
color: #eee;
} @else {
color: #111;
}
}Most equality bugs are units, list form, or confusing equality with truthiness.
1 != 1px in Dart Sass. Prefer consistent units or convert explicitly.
Space vs comma and bracketed vs unbracketed change equality even with the same items.
Both are falsey in boolean context, but null == false is false.
The CSS output never contains ==—only the chosen values or branches.
Equality is core SassScript on Dart Sass.
| Operator | Meaning |
|---|---|
== | True when both sides are equal |
!= | True when both sides are not equal |
| Unitless equality | Dart Sass: unitless ≠ unit-bearing (LibSass differed) |
| Return type | Boolean (true / false) |
Compile with the Dart Sass CLI.
96px == 1in).One line: use == / != to compare Sass values—watch units, list form, and null vs false.
Practical checklist:
1. Compare with == or !=
2. Keep number units consistent (or convertible)
3. Remember quoted == unquoted for same text
4. Check list separator / brackets
5. Use @if $x == $y for compile-time branchesCompare numbers with less-than and greater-than operators.
8 people found this page helpful