SASS Equality Operators (original) (raw)

Last Updated : 4 Apr, 2023

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 the 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: == The returned output for this shows whether the two expressions are equal, and != The returned output for this shows whether the two expressions are not equal. Two expressions are said to be equal if they have the same values and same types, this means different for different types shown below:

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

Example:

css `

@debug 2px == 2px

`

Output:

true

css `

@debug 1px == 1em

`

Output:

false

css `

@debug 96px == 1in

`

Output:

true

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

Example:

css `

@debug geeksforgeeks == "geeksforgeeks"

`

Output:

true

css `

@debug geeksforgeeks == GFG

`

Output:

false

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

Example:

css `

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

`

Output:

true

css `

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

`

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:

css `

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

`

Output:

true

css `

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

`

Output:

false

css `

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

`

Output:

false

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

Example:

css `

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

`

Output:

true

css `

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

`

Output:

true

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

Example:

css `

@debug true == true

`

Output:

true

css `

@debug false == null

`

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:

css `

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

`

Output:

true

css `

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

`

Output:

false