SASS | Relational Operators

Relational operators are those which compare the values of two numbers. They tell whether one number is smaller or greater than or equal to the other number. They automatically convert numbers into compatible units.

  • <expression> < <expression> returns whether the first expression’s value is less than the second’s.
  • <expression> <= <expression> returns whether the first expression’s value is less than or equal to the second’s.
  • <expression> > <expression> returns whether the first expression’s value is greater than to the second’s.
  • <expression> >= <expression>, returns whether the first expression’s value is greater than or equal to the second’s.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

@debug 100 > 50 

chevron_right


Output:

true
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug 10px > 17px 

chevron_right


Output:

false
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug 96px >= 1in  

chevron_right


Output:



true
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug 1001ms <= 1

chevron_right


Output:

false

Numbers without units can be compared with any number. These unitless numbers are automatically converted to the other number’s unit.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

@debug 100 > 50px 

chevron_right


Output:

true
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug 10px > 17  

chevron_right


Output:

false

Only the numbers with incompatible units cannot be compared to each other.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

@debug 100px > 10s

chevron_right


Output:

Error: Incompatible units px and s.



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.