Relational operators compare whether one number is larger or smaller than another: <, <=, >, and >=. Compatible units convert automatically.
10px < 17px is true; 96px >= 1in is true after unit conversion.
A unitless number can compare with any unit—it adopts that unit for the comparison.
100px > 10s fails at compile time. Compare lengths to lengths, times to times.
$a < $b // less than
$a <= $b // less than or equal
$a > $b // greater than
$a >= $b // greater than or equal
100 > 50; // true
10px < 17px; // true
96px >= 1in; // true
1000ms <= 1s; // true
100 > 50px; // true (unitless)
// Typical use:
@if $width >= 600px { ... }Pattern: compare two numbers → get a boolean → branch with @if (often with and / or).
How units affect comparisons:
| Case | Result |
|---|---|
| Same unit | Direct numeric compare |
Compatible units (px / in, ms / s) | Converted, then compared |
| Unitless vs unit | Allowed — unitless adopts the other unit |
Incompatible (px vs s) | Compile error |
vs == | Relational orders numbers; equality also cares about type/units differently |
Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
Compare unitless numbers, lengths, and convertible units.
@use "sass:meta";
.probe {
--a: #{meta.inspect(100 > 50)};
--b: #{meta.inspect(10px < 17px)};
--c: #{meta.inspect(96px >= 1in)};
--d: #{meta.inspect(1000ms <= 1s)};
}Unitless values adopt the other side’s unit for ordering.
@use "sass:meta";
.unitless {
--a: #{meta.inspect(100 > 50px)};
--b: #{meta.inspect(10px < 17)};
}100px here.17px.1 == 1px is false, but unitless can still order against px.
@use "sass:meta";
.eq-vs-rel {
--eq: #{meta.inspect(1 == 1px)};
--rel: #{meta.inspect(1 < 2px)};
}>=Inclusive width check for a layout token.
$width: 720px;
.layout {
@if $width >= 600px {
max-width: 60rem;
} @else {
max-width: 100%;
}
}600px would match too.andClamp a font size between min and max using two comparisons.
$size: 14px;
$min: 12px;
$max: 18px;
.text {
@if $size >= $min and $size <= $max {
font-size: $size;
} @else {
font-size: $min;
}
}Most relational bugs are incompatible units or mixing up == with ordering.
Incompatible units throw. Keep dimensions comparable.
1 == 1px is false in Dart Sass, but 1 < 2px can be true. See equality.
Breakpoints and ranges usually want equal values to match.
@if $width >= 600px chooses CSS while compiling. Browser-responsive checks still need @media.
Relational operators are core SassScript on Dart Sass.
| Operator | Meaning |
|---|---|
< | Less than |
<= | Less than or equal |
> | Greater than |
>= | Greater than or equal |
| Return type | Boolean (true / false) |
Compile with the Dart Sass CLI.
One line: compare Sass numbers with < <= > >=—units convert when compatible.
Practical checklist:
1. Compare numbers only (not strings/colors)
2. Keep units compatible (or unitless)
3. Prefer >= / <= for inclusive breakpoints
4. Combine with and / or when needed
5. Remember: this is compile-time, not @mediaDo arithmetic with +, -, *, %, and math.div().
8 people found this page helpful