SASS | Relational Operators (original) (raw)

Last Updated : 28 May, 2020

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.

• < returns whether the first expression’s value is less than the second’s.
• <= returns whether the first expression’s value is less than or equal to the second’s.
• > returns whether the first expression’s value is greater than to the second’s.
• >= , 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.