Booleans are the logical values true and false. They come from literals, equality and relational operators, and many built-in functions.
Use and, or, and not—not &&, ||, or !.
@if.When a condition is truthy, Sass emits that block at compile time. Browsers never see the boolean logic.
false and null are falsey.Empty strings, empty lists, and 0 are all truthy in Sass—unlike JavaScript.
$circle: true;
@if $circle {
border-radius: 50%;
}
// Operators (words, not && / || / !)
true and false // false
true or false // true
not false // true
// Comparisons return booleans
1px == 1px // true
10px < 3px // falsePattern: get a boolean → combine with and / or / not → branch with @if (or pass as a mixin flag).
Where booleans show up:
| Pattern | Result idea |
|---|---|
true / false | Boolean literals |
== != < > | Comparisons that return booleans |
and / or / not | Boolean operators (see boolean operators) |
@if $cond { ... } | Emit styles when truthy |
false / null | The only falsey values |
Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
Equality, relational ops, and math.compatible() produce true / false.
@use "sass:math";
.demo {
--eq-false: #{1px == 2px};
--eq-true: #{1px == 1px};
--lt-false: #{10px < 3px};
--compat: #{math.compatible(100px, 3in)};
}and / or / notWord operators combine or invert booleans.
.demo {
--and-t: #{true and true};
--and-f: #{true and false};
--or-t: #{true or false};
--or-f: #{false or false};
--not-t: #{not true};
--not-f: #{not false};
}@if Mixin FlagPass a boolean into a mixin to optionally emit styles.
@use "sass:math";
@mixin avatar($size, $circle: false) {
width: $size;
height: $size;
@if $circle {
border-radius: math.div($size, 2);
}
}
.square-av {
@include avatar(100px, $circle: false);
}
.circle-av {
@include avatar(100px, $circle: true);
}Only false and null fail conditions; 0, "", and () pass.
@mixin check($name, $cond) {
.#{$name} {
@if $cond {
content: "truthy";
} @else {
content: "falsey";
}
}
}
@include check(false-lit, false);
@include check(null-lit, null);
@include check(zero, 0);
@include check(empty-str, "");
@include check(empty-list, ());() are also truthy.string.index as a ConditionFunctions that return null or a number work directly in @if.
@use "sass:string";
@mixin check($name, $cond) {
.#{$name} {
@if $cond {
content: "truthy";
} @else {
content: "falsey";
}
}
}
@include check(space, string.index("hello world", " "));
@include check(missing, string.index("hello", " "));null (falsey).!= null check required.string.index().Most boolean bugs come from JS-style operators or JS-style falsiness.
Write and, or, and not. See boolean operators.
Do not treat zero like JavaScript. Compare explicitly if you need “is zero”.
Check length or equality when emptiness matters.
@if never runs in the browser. Output is plain CSS.
Booleans and boolean operators are core Sass on Dart Sass.
| Feature | Status |
|---|---|
true / false | Supported |
and / or / not | Supported |
@if / @else | Supported |
| Truthy / falsey rules | Only false and null are falsey |
Compile with the Dart Sass CLI.
One line: use booleans (and truthy checks) with @if to choose what CSS Sass emits.
Practical checklist:
1. Use true / false literals or comparison results
2. Combine with and / or / not (not && / || / !)
3. Branch styles with @if / @else
4. Remember only false and null are falsey
5. Pass boolean flags into mixins for optional CSSLearn the other falsey value and how missing results use null.
8 people found this page helpful