Skip to main content

Sass: Equality Operators

The equality operators return whether or not two values are the same.

They’re written <expression> == <expression>, which returns whether two expressions are equal, and <expression> != <expression>, which returns whether two expressions are not equal.

Two values are considered equal if they’re the same type and the same value, which means different things for different types:

  • Numbers are equal if they have the same value and the same units, or if their values are equal when their units are converted between one another.
  • Strings are unusual in that unquoted and quoted strings with the same contents are considered equal.
  • Colors are equal if they have the same red, green, blue, and alpha values.
  • Lists are equal if their contents are equal. Comma-separated lists aren’t equal to space-separated lists, and bracketed lists aren’t equal to unbracketed lists.
  • Maps are equal if their keys and values are both equal.
  • Calculations are equal if their names and arguments are all equal. Operation arguments are compared textually.
  • true, false, and null are only equal to themselves.
  • Functions are equal to the same function. Functions are compared by reference, so even if two functions have the same name and definition they’re considered different if they aren’t defined in the same place.

Example:

@debug "Helvetica" == Helvetica; // true
@debug "Helvetica" != "Arial"; // true

@debug hsl(34, 35%, 92.1%) == #f2ece4; // true
@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8); // true

@debug (5px 7px 10px) == (5px 7px 10px); // true
@debug (5px 7px 10px) != (10px 14px 20px); // true
@debug (5px 7px 10px) != (5px, 7px, 10px); // true
@debug (5px 7px 10px) != [5px 7px 10px]; // true

$theme: ("venus": #998099, "nebula": #d2e1dd);
@debug $theme == ("venus": #998099, "nebula": #d2e1dd); // true
@debug $theme != ("venus": #998099, "iron": #dadbdf); // true

@debug true == true; // true
@debug true != false; // true
@debug null != false; // true

@debug get-function("rgba") == get-function("rgba"); // true
@debug get-function("rgba") != get-function("hsla"); // true