Sass Boolean Operators

What You’ll Learn

Sass boolean operators use words—not symbols—for logic: not, and, and or. This page covers truthiness, how null behaves, combining conditions in @if, and five compiled examples.

What Are Boolean Operators?

Official docs: unlike languages like JavaScript, Sass uses words rather than symbols for its boolean operators.

• not flips a value: true ↔ false.
• and needs both sides truthy.
• or needs at least one side truthy.
• Logic runs when Sass compiles—not in the browser.
• Most often used inside @if, mixins, and helpers.

📝 Syntax

not $expression

$expression-a and $expression-b

$expression-a or $expression-b

Operators

Official samples

vs JavaScript symbols

⚖️ Truthiness and Falsiness

Official docs: anywhere true or false are allowed, you can use other values as well.

• Falsey — only false and null.
• Truthy — every other value, including 0, "", and empty lists.

🔎 Null Checks & string.index

Official docs: to check if a string contains a space, write string.index($string, " "). The function returns null if the substring is missing and a number otherwise—so it works as a condition directly.

@use "sass:string";

$string: "Hello World";

@if string.index($string, " ") {
  // Found a space (number is truthy)
} @else {
  // Missing → null is falsey
}

🔁 Mixing With Comparisons

Boolean operators often wrap equality or relational checks:

@if $width >= 600px and $theme == "dark" {
  // wide + dark
}

@if not ($mode == "print") {
  // everything except print
}

@if $flag or $fallback {
  // use a default when $flag is false/null
}

Parentheses help when you negate a whole comparison: not ($mode == "print").

Examples Gallery

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

@use "sass:meta";

.ops {
  --not-t: #{meta.inspect(not true)};
  --not-f: #{meta.inspect(not false)};
  --and-tt: #{meta.inspect(true and true)};
  --and-tf: #{meta.inspect(true and false)};
  --or-tf: #{meta.inspect(true or false)};
  --or-ff: #{meta.inspect(false or false)};
}

.ops {
  --not-t: false;
  --not-f: true;
  --and-tt: true;
  --and-tf: false;
  --or-tf: true;
  --or-ff: false;
}

@use "sass:meta";

.ops {
  --zero: #{meta.inspect(if(0, true, false))};
  --empty-str: #{meta.inspect(if("", true, false))};
  --empty-list: #{meta.inspect(if((), true, false))};
  --nullish: #{meta.inspect(if(null, true, false))};
  --falsey: #{meta.inspect(if(false, true, false))};
}

.ops {
  --zero: true;
  --empty-str: true;
  --empty-list: true;
  --nullish: false;
  --falsey: false;
}

@use "sass:meta";
@use "sass:string";

$label: "Hello World";
$plain: "HelloWorld";

.has-space {
  --ok: #{meta.inspect(string.index($label, " ") != null)};
  --no: #{meta.inspect(string.index($plain, " ") != null)};
  --raw-ok: #{meta.inspect(string.index($label, " "))};
  --raw-no: #{meta.inspect(string.index($plain, " "))};
}

.has-space {
  --ok: true;
  --no: false;
  --raw-ok: 6;
  --raw-no: null;
}

$dark: true;
$compact: false;

.card {
  @if $dark and not $compact {
    --mode: dark-roomy;
    background: #111;
    padding: 2rem;
  } @else {
    --mode: other;
  }
}

.card {
  --mode: dark-roomy;
  background: #111;
  padding: 2rem;
}

@use "sass:meta";

$flag: null;
$fallback: true;

.gate {
  --use-fallback: #{meta.inspect($flag or $fallback)};
  --both: #{meta.inspect($fallback and not $flag)};
}

.gate {
  --use-fallback: true;
  --both: true;
}

🚀 Real-World Use Cases

• Feature flags — emit optional CSS only when a flag is on.
• Theme combos — $dark and not $high-contrast.
• Optional arguments — treat null as “not provided”.
• String probes — use string.index results as conditions.
• Guard rails — skip mixins when a required token is missing.

⚠️ Common Pitfalls

• JS habits — !, &&, and || are not Sass boolean ops.
• Assuming 0 is falsey — in Sass it is truthy.
• Empty string / list — also truthy.
• Forgetting parentheses — prefer not ($a == $b) for clarity.
• Expecting runtime logic — these operators never appear in CSS.

💡 Best Practices