SASS | Equality Operators

Compatibility:
Dart Sass is fully compatible with using equality operators, whereas LibSass and older versions of Ruby Sass (older than version 4.0.0) consider numbers as equal even if they have different units or if one has a unit and other does not. This behavior was not useful and hence the newer versions have removed this as it violates transitivity.

The equality operator tells whether the two values are equal or not.

Syntax:
<expression> == <expression> 
The returned output for this shows weather the two expressions are equal, and
<expression> != <expression>

The returned output for this shows weather the two expressions are not equal. Two expressions are said to be equal if they have same values and same types, this means different for different type shown below:

  • Two numbers are equal if they have the same value and the same units or after conversion into same units their values are equal.

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

@debug 2px == 2px 

chevron_right


Output:

true
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug 1px == 1em 

chevron_right


Output:

false
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug 96px == 1in 

chevron_right


Output:

true
  • Two strings are considered equal if their content is same weather they are quoted or unquoted.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

@debug geeksforgeeks == "geeksforgeeks"

chevron_right


Output:

true
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug geeksforgeeks == GFG

chevron_right


Output:

false
  • Two colors are considered equals if they have equal red, green, blue and alpha values

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

@debug hsl(120, 72%, 80%) == #1ba61b

chevron_right


Output:



true
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug rgba(120. 236, 135, 0.1) == rgba(120, 236, 135, 0.5)

chevron_right


Output:

false
  • Two lists are equal if they have same contents. Keep in mind that space-separated lists are not equal to comma-separated lists and bracketed lists are not equal to unbracketed lists.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

@debug (2, 4, 6) == (2, 4, 6)

chevron_right


Output:

true
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug (2 4 6) == (2, 4, 6)

chevron_right


Output:

false
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug (2 4 6) == [2 4 6]

chevron_right


Output:

false
  • Two maps are equal if both their keys and values are equal.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

$gradient: ("green" : abc, "cyan" : def)

chevron_right


Output:

true
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug $gradient == ("green" : abc, "blue" : ghi)

chevron_right


Output:

true
  • true, false and NULL are only equal to themselves.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

@debug true == true

chevron_right


Output:

true
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug false == null

chevron_right


Output:

false
  • A function is only equal to itself. 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

@debug solve(24) == solve(24)

chevron_right


Output:

true
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug solve(24) == solve("geeksforgeeks")

chevron_right


Output:

false



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.