Skip to content
Tutorial Reference

Sass: Relational Operators

How Sass relational operators (<, <=, >, >=) compare numbers with automatic unit conversion, including unitless comparisons and error handling for incompatible units.

Relational operators determine whether numbers are larger or smaller than one another. They automatically convert between 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.
@debug 100 > 50; // true
@debug 10px < 17px; // true
@debug 96px >= 1in; // true
@debug 1000ms <= 1s; // true

Unit-less numbers can be compared with any number. They're automatically converted to that number's unit.

@debug 100 > 50px; // true
@debug 10px < 17; // true

Note that numbers with incompatible units can't be compared. For example pixels with seconds:

@debug 100px > 10s;
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.
Navigation