Relational Operators

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.
Playground

SCSS Syntax

@debug 100 > 50; // true
@debug 10px < 17px; // true
@debug 96px >= 1in; // true
@debug 1000ms <= 1s; // true
Playground

Sass Syntax

@debug 100 > 50  // true
@debug 10px < 17px  // true
@debug 96px >= 1in  // true
@debug 1000ms <= 1s  // true

Unitless numbers can be compared with any number. They’re automatically converted to that number’s unit.

Playground

SCSS Syntax

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

Sass Syntax

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

Numbers with incompatible units can’t be compared.

Playground

SCSS Syntax

@debug 100px > 10s;
Playground

Sass Syntax

@debug 100px > 10s

CSS Output

100px and 10s have incompatible units.
  ╷
1 │ @debug 100px > 10s;
  │        ^^^^^^^^^^^
  ╵
  - 1:8  root stylesheet