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:

css

@debug 100 > 50

Output:

true

css

@debug 10px > 17px

Output:

false

css

@debug 96px >= 1in

Output:

true

css

@debug 1001ms <= 1s

Output:

false

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

css

@debug 100 > 50px

Output:

true

css

@debug 10px > 17

Output:

false

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

Example:

css

@debug 100px > 10s

Output:

Error: Incompatible units px and s.

SASS | Relational Operators

Explore