Sass Equality Operators

Last Updated:

What is Equality Operators?

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

SASS TO CSS CONVERTER
//Check your console @debug 1px == 1px; // true @debug 1px != 1em; // true @debug "Helvetica" == Helvetica; // true @debug "Helvetica" == "Arial"; // false

SASS Equality Operators

The following table provides a list of equality operators available in JavaScript.

OperatorExplanationOperationResult
== Equal to 1px == 1px true
!= Not equal to 1px != 1em true

Equality Operators for Numbers

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.

Example

SASS TO CSS CONVERTER
//Check your console @debug 1px == 1px; // true @debug 1px == 1em; // false @debug 1 == 1; // true @debug 1 == "1"; // false @debug 1in == 2.54cm; // true

Equality Operators for Strings

Strings are unusual in that unquoted and quoted strings with the same contents are considered equal.

Example

SASS TO CSS CONVERTER
//Check your console @debug "Helvetica" == Helvetica; // true @debug "Helvetica" == "Arial"; // false @debug "Helvetica" == "Helvetica"; // true

Equality Operators for Colors

Colors are equal if they have the same red, green, blue, and alpha values.

Example

SASS TO CSS CONVERTER
//Check your console @debug #ffffff == rgb(255, 255, 255); // true @debug #ffffff == "#ffffff"; // false @debug hsl(0, 0%, 100%) == rgb(255, 255, 255); // true

Equality Operators for Lists

Lists are equal if their contents are equal.

Note: Sass has following rules in checking equality between list

  • Comma-separated lists aren’t equal to space-separated lists.
  • Bracketed lists aren’t equal to unbracketed lists.

Example

SASS TO CSS CONVERTER
//Check your console $list1: [1px 2px 3px]; $list2: [1px, 2px, 3px]; $list3: 1px, 2px, 3px; $list4: 1px 2px 3px; @debug $list1 == $list2; // false @debug $list2 == $list3; // false @debug $list3 == $list4; // false @debug $list4 == $list1; // false

Equality Operators for Maps

Maps are equal if their keys and values are both equal.

Example

SASS TO CSS CONVERTER
//Check your console $map1: ("regular": 400, "medium": 500, "bold": 700); $map2: ("medium": 500, "bold": 700, "regular": 400); $map3: ("med": 500, "bold": 700, "reg": 400); @debug $map1 == $map2; // true @debug $map1 == $map3; // false

Equality Operators for true, false, and null

true, false, and null are only equal to themselves.

Example

SASS TO CSS CONVERTER
//Check your console @debug true == true; // true @debug false == false; // true @debug null == null; // true

Equality Operators for Functions

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

SASS TO CSS CONVERTER
//Check your console @function add($num1, $num2) { @return $num1 + $num2; } @function addNum($num1, $num2) { @return $num1 + $num2; } @debug add == add; // true @debug add == addNum; // false

Share this Page

Meet the Author