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:
@debug 100 > 50 |
Output:
true
@debug 10px > 17px |
Output:
false
@debug 96px >= 1 in |
Output:
true
@debug 1001 ms <= 1 s |
Output:
false
Numbers without units can be compared with any number. These unitless numbers are automatically converted to the other number’s unit.
Example:
@debug 100 > 50px |
Output:
true
@debug 10px > 17 |
Output:
false
Only the numbers with incompatible units cannot be compared to each other.
Example:
@debug 100px > 10 s |
Output:
Error: Incompatible units px and s.
Contact Us