Sass Equality Operators

February 7, 2021 12:07 pm IST

You are Here:

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

Run

SASS Equality Operators

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

Operator	Explanation	Operation	Result
==	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

Run

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

Run

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

Run

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

Run

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

Run

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

Run

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

Run