LESS Guard Comparison Operators

The Full List of Guard Comparison Operators

LESS guards support exactly five comparison operators: >, >=, =, =<, and <. Notably, there is no <= operator, LESS uses =< instead, a common source of confusion for developers used to C-style languages.

These operators work on numbers directly, and on colors when combined with a channel-extraction function like lightness() or hue(), since colors themselves cannot be directly compared with > or <.

.contrast-text(@bg) when (lightness(@bg) >= 50%) {
  color: black;
}
.contrast-text(@bg) when (lightness(@bg) =< 50%) {
  color: white;
}

Note the =< operator here, LESS has no <= operator, this is the correct and only way to express less-than-or-equal.

Guard Comparison Operator Reference

>   greater than
>=  greater than or equal to
=   equal to
=<  less than or equal to  (NOT <=)
<   less than

• There is no != (not equal) operator directly; use not (@a = @b) instead.
• =< is the correct less-than-or-equal operator; <= is not valid LESS syntax.
• Comparisons work directly on numbers, including numbers with matching or convertible units.
• Comparing colors directly with >/< doesn't produce a meaningful result; extract a channel first with a function like lightness().

Guard Comparison Operators Cheatsheet

Every comparison operator LESS guards support, with example usage.

Comparing Numbers with Units

When comparing two numbers with compatible units, LESS converts them before comparing. Comparing numbers with incompatible units (like px against deg) produces an unreliable result and should be avoided.

.spacing(@gap) when (@gap > 1rem) {
  gap: @gap;
}
.spacing(@gap) when (@gap =< 1rem) {
  gap: 1rem; // enforce a sensible minimum
}

Comparing Colors via Extracted Channels

Colors themselves can't be meaningfully compared with > or <, but extracting a specific channel, most commonly lightness(), gives you a plain number that comparison operators work with naturally.

.auto-text-color(@bg) when (lightness(@bg) > 60%) {
  color: #111;
}
.auto-text-color(@bg) when (lightness(@bg) =< 60%) {
  color: #fff;
}

Emulating a Not-Equal Comparison

LESS has no direct != operator. To express 'not equal to', wrap an equality guard in not (...) instead, which negates the entire condition.

.badge(@status) when not (@status = draft) {
  font-weight: 700; // bold for anything except the draft status
}

Common Mistakes

• Writing <= and expecting it to work; LESS requires =< for less-than-or-equal.
• Trying to compare two colors directly with > or < instead of extracting a comparable channel first.
• Assuming a != operator exists; LESS requires not (@a = @b) to express inequality.
• Comparing numbers with incompatible units and trusting the result without double-checking the compiled output.

Key Takeaways

• LESS guards support exactly >, >=, =, =<, and <, there is no <= operator.
• not (@a = @b) is the correct way to express 'not equal to' in a guard.
• Number comparisons handle compatible unit conversion automatically.
• Colors must be compared via an extracted channel (like lightness()), not directly.