Sass Relational Operators

What You’ll Learn

Sass relational operators answer “is this number larger or smaller?” Use <, <=, >, and >= on numbers. This page covers unit conversion, unitless values, incompatible units, and five compiled examples.

What Are Relational Operators?

Official docs: relational operators determine whether numbers are larger or smaller than one another. They automatically convert between compatible units.

• They work on numbers (with or without units).
• Results are booleans: true or false.
• Most often used inside @if, clamps, and design-token guards.
• Comparison happens when Sass compiles—not in the browser.
• Pair with equality (== / !=) when you need “same value” checks.

📝 Syntax

// Less than
$a < $b

// Less than or equal
$a <= $b

// Greater than
$a > $b

// Greater than or equal
$a >= $b

Operators

Return value

⚖️ Units & Automatic Conversion

Official docs: relational operators automatically convert between compatible units.

🔢 Unitless Numbers

Official docs: unitless numbers can be compared with any number. They are automatically converted to that number’s unit.

⚠️ Incompatible Units

Official docs: numbers with incompatible units can’t be compared. Sass stops with a compile error.

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

• Length vs time (px vs s) fails.
• Length vs angle (px vs deg) fails.
• Keep both sides in the same measurement family.

🔁 Relational vs Equality

Examples Gallery

Each example uses relational operators at compile time. Open View Compiled CSS for verified output (booleans shown with meta.inspect).

@use "sass:meta";

.probe {
  --gt: #{meta.inspect(100 > 50)};
  --lt: #{meta.inspect(10px < 17px)};
  --ge: #{meta.inspect(96px >= 1in)};
  --le: #{meta.inspect(1000ms <= 1s)};
}

.probe {
  --gt: true;
  --lt: true;
  --ge: true;
  --le: true;
}

@use "sass:meta";

.probe {
  --ul1: #{meta.inspect(100 > 50px)};
  --ul2: #{meta.inspect(10px < 17)};
  --eq-edge: #{meta.inspect(100 >= 100)};
  --strict: #{meta.inspect(100 > 100)};
}

.probe {
  --ul1: true;
  --ul2: true;
  --eq-edge: true;
  --strict: false;
}

@use "sass:meta";

$width: 720px;

.card {
  @if $width >= 600px {
    --layout: wide;
    max-width: 100%;
  } @else {
    --layout: narrow;
  }
  --ok: #{meta.inspect($width >= 600px)};
}

.card {
  --layout: wide;
  max-width: 100%;
  --ok: true;
}

@use "sass:meta";

$min: 12px;
$max: 24px;
$size: 18px;

.clamp-demo {
  --in-range: #{meta.inspect($size >= $min and $size <= $max)};
  --below: #{meta.inspect(10px < $min)};
  --above: #{meta.inspect(30px > $max)};
}

.clamp-demo {
  --in-range: true;
  --below: true;
  --above: true;
}

@use "sass:meta";

$base: 16px;
$step: 4px;

.scale {
  --md-gt-sm: #{meta.inspect(($base + $step) > $base)};
  --lg-ge: #{meta.inspect(($base + $step * 2) >= 24px)};
}

.scale {
  --md-gt-sm: true;
  --lg-ge: true;
}

🚀 Real-World Use Cases

• Breakpoints — @if $width >= 768px for layout variants.
• Clamps — keep font or spacing tokens inside a min/max range.
• Token validation — reject sizes that are too small or too large.
• Type scales — assert each step is larger than the previous.
• Timing tokens — compare durations after converting ms and s.

⚠️ Common Pitfalls

• Incompatible units — 100px > 10s fails at compile time.
• Exclusive vs inclusive — > excludes equality; >= includes it.
• Confusing with == — relational ops do not compare strings or colors.
• Unitless habits — relational unitless rules differ from equality rules.
• Expecting browser runtime — these operators never appear in CSS.

💡 Best Practices