Sass Boolean Operators

Beginner
8 min read
Updated: Nov 2026
5 examples
Dart Sass
Sass boolean operators not, and, and or using words instead of symbols
Definition

Definition and Usage

Unlike JavaScript symbols (!, &&, ||), Sass uses words for boolean logic: not, and, and or. They run at compile time (often inside @if).

Official sample idea.

not true is false; true and false is false; true or false is true.

Truthiness.

Anywhere true/false are allowed, other values work too. Only false and null are falsey.

0 and "" are truthy.

Empty strings, empty lists, and 0 are truthy in Sass—unlike many other languages.

Syntax

Syntax

SCSS
not $expr          // opposite of $expr
$a and $b          // true if both truthy
$a or $b           // true if either truthy

not true;          // false
not false;         // true
true and true;     // true
true and false;    // false
true or false;     // true
false or false;    // false

// Typical use:
@if $dark and not $compact { ... }

Pattern: build a condition with words → branch with @if → emit different CSS at compile time.

Reference

Truthiness

What Sass treats as true or false in conditions:

ValueIn @if
false, nullFalsey — condition fails
true, numbers (incl. 0), strings (incl. ""), lists, maps…Truthy — condition succeeds
string.index(...) missReturns null (falsey)
string.index(...) hitReturns a number (truthy)
Code

SCSS Examples

Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).

Example 1 — Official Boolean Samples

not, and, and or on plain booleans.

SCSS
@use "sass:meta";

.probe {
  --not-true: #{meta.inspect(not true)};
  --not-false: #{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)};
}

How It Works

  1. not flips true/false.
  2. and needs both sides truthy.
  3. or needs at least one truthy.
  4. Matches the official Sass docs samples.

Example 2 — Truthiness Surprise

0 and "" pass @if; only null and false fail.

SCSS
@use "sass:meta";

@function is-truthy($v) {
  @if $v {
    @return true;
  }
  @return false;
}

.truth {
  --zero: #{meta.inspect(is-truthy(0))};
  --empty-str: #{meta.inspect(is-truthy(""))};
  --null: #{meta.inspect(is-truthy(null))};
  --false: #{meta.inspect(is-truthy(false))};
}

How It Works

  1. 0 is truthy in Sass.
  2. Empty string is truthy too.
  3. null / false are the falsey pair.
  4. Do not copy JS falsy rules here.

Example 3 — and + not in @if

Combine flags to pick a padding value.

SCSS
$dark: true;
$compact: false;

.card {
  @if $dark and not $compact {
    padding: 1.5rem;
  } @else {
    padding: 0.75rem;
  }
}

How It Works

  1. $dark is truthy.
  2. not $compact is true.
  3. and keeps the larger padding branch.
  4. Only one CSS rule is emitted.

Example 4 — or Gate

Emit a style when either flag is on.

SCSS
$a: true;
$b: false;

.gate {
  @if $a or $b {
    outline: 1px solid #336699;
  }
}

How It Works

  1. $a alone is enough for or.
  2. $b being false does not block it.
  3. Both false would skip the block.
  4. Useful for feature-flag style toggles.

Example 5 — string.index as a Condition

Official idea: a number is truthy; a miss returns null (falsey).

SCSS
@use "sass:string";

$name: "Helvetica Neue";

.flag {
  @if string.index($name, " ") {
    content: "has-space";
  } @else {
    content: "no-space";
  }
}

How It Works

  1. index finds the space.
  2. Number result is truthy.
  3. Miss would be null → else branch.
  4. No extra != null needed for a simple check.

Edge Cases & Pitfalls

Most boolean bugs are bringing JavaScript falsy rules into Sass.

words

Use words, not ! && ||

Write not, and, or. Symbol operators are not Sass boolean syntax.

0

Zero is truthy

@if 0 succeeds. Compare with equality or relational operators when you mean “non-zero”.

null

null is the missing-value falsey

See null. Functions often return null on failure.

compile-time

Conditions run while compiling

Browsers never see and/or—only the CSS branch you emit.

Toolchain

Sass Support

Boolean operators are core SassScript on Dart Sass.

OperatorMeaning
notOpposite of the expression
andTrue only if both sides are truthy
orTrue if either side is truthy
Falsey valuesOnly false and null

Compile with the Dart Sass CLI.

Remember

Key Takeaways

  • not / and / or — words, not JS symbols.
  • Only false and null are falsey.
  • Pair with @if for compile-time branches.
  • string.index fits naturally as a truthy/null check.

One line: combine conditions with not, and, and or—remember only false and null are falsey.

Practice

Compile Notes

Practical checklist:

checklist.txt
1. Use not / and / or (not ! && ||)
2. Treat only false and null as falsey
3. Branch with @if / @else
4. Use string.index(...) directly in conditions when useful
5. Prefer equality/relational ops when testing 0 or ""

Frequently Asked Questions

Unlike JavaScript symbols (!, &&, ||), Sass uses words: not, and, and or. They combine or invert boolean values at compile time.
not returns the opposite of an expression’s value: not true is false, and not false is true. With truthiness, not null is true.
and returns true when both sides are truthy, and false when either side is falsey.
or returns true when either side is truthy, and false when both sides are falsey.
Only false and null. Empty strings, empty lists, and the number 0 are all truthy in Sass—unlike some other languages.
Use string.index($string, " "). It returns null when missing (falsey) and a number when found (truthy), so it works directly in @if.

Next: Sass @use

Load built-in and project modules with the modern module system.

@use →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass String Operators Sass @use Rule