Sass Booleans

Q: What are Sass booleans?

Booleans are the logical values true and false. They come from literals, equality/relational operators, and many built-in functions such as map.has-key().

Q: How do I combine booleans?

Use word operators: and (both true), or (either true), and not (opposite). Unlike JavaScript, Sass does not use &&, ||, or !.

Q: What values are falsey in Sass?

Only false and null. Empty strings, empty lists, and the number 0 are all truthy.

Q: How do I use a boolean in styles?

Use @if $flag { … } to include a block when the condition is truthy, or if($condition, $if-true, $if-false) to pick one value.

Q: Does @if run in the browser?

No. Boolean logic and @if run at compile time. Browsers only see the CSS that was emitted.

Q: How is string.index useful with booleans?

string.index returns null when a substring is missing (falsey) and a number when found (truthy), so it works directly in @if conditions.

Beginner

⏱️ 12 min read

📚 Updated: Jul 2026

🎯 5 Examples

true / false

Overview

What You’ll Learn

Sass booleans are true and false. This page covers operators (and / or / not), truthiness, @if, the if() function, and five compiled examples.

true / false

Literals

Operators

and / or / not

@if

Gate styles

if()

Pick a value

Truthiness

false & null

Practice

5 examples

Concept

What Are Sass Booleans?

Official docs: booleans are the logical values true and false. Besides writing them literally, you get them from equality and relational operators, and from many built-in functions such as map.has-key().

Compile-time only—browsers never evaluate Sass boolean logic.
Combine with word operators: and, or, not.
Drive optional styles with @if.
Only false and null are falsey.

💡

Beginner tip

Use a boolean flag on a mixin ($circle: false) when a feature is optional. That keeps call sites clear: $circle: true turns the feature on.

Foundation

📝 Syntax

styles.scss

$enabled: true;
$debug: false;

$same: 1px == 1px;   // true
$bigger: 10px > 3px; // true
$both: $enabled and not $debug; // true

Logic

⚖️ Boolean Operators

Official docs: and is true when both sides are true; or is true when either side is true; not flips a single boolean. For a deeper operator focus, see Boolean operators.

Expression	Result
`true and false`	`false`
`true or false`	`true`
`not true`	`false`
`not false`	`true`

Control

🚀 Using Booleans

Official docs highlight two main tools:

@if — evaluate a block of styles when the condition is truthy.
if() — return one value if the condition is truthy, and another if it is falsey: if($cond, $when-true, $when-false).

Conditions

✅ Truthiness and Falsiness

Official docs: anywhere true or false are allowed, other values work too. Only false and null are falsey. Every other value is truthy—including 0, empty strings, and empty lists.

💡

Heads up

This differs from JavaScript and many other languages. Do not assume empty or zero means “off” in Sass—check explicitly when that matters.

Cheat Sheet

⚡ Quick Reference

Goal	Code
Literals	`true` / `false`
Compare	`1px == 1px`, `10px < 3px`
Combine	`$a and $b`, `$a or $b`, `not $a`
Optional styles	`@if $flag { … }`
Pick a value	`if($flag, 10px, 30px)`
Falsey values	`false`, `null` only

Hands-On

Examples Gallery

Each example shows boolean logic at compile time. Open View Compiled CSS for verified output.

📚 Getting Started

Produce booleans, then use them to gate styles.

Example 1 — Comparisons & `and` / `or` / `not`

Equality, relational checks, and boolean word operators.

styles.scss

@use "sass:map";
@use "sass:meta";

$weights: ("bold": 700);

.ops {
  --eq1: #{meta.inspect(1px == 2px)};
  --eq2: #{meta.inspect(1px == 1px)};
  --lt: #{meta.inspect(10px < 3px)};
  --has: #{meta.inspect(map.has-key($weights, "bold"))};
  --and1: #{meta.inspect(true and true)};
  --and2: #{meta.inspect(true and false)};
  --or1: #{meta.inspect(true or false)};
  --or2: #{meta.inspect(false or false)};
  --not1: #{meta.inspect(not true)};
  --not2: #{meta.inspect(not false)};
}

How It Works

Comparisons and helpers like map.has-key return booleans you can store, combine, or pass into @if.

Example 2 — Optional Styles with `@if`

Official-docs style avatar mixin: circle radius only when $circle is true.

styles.scss

@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);
}

How It Works

When $circle is false, the border-radius rule is never written. When true, Sass emits it with half the size.

📈 if(), Truthiness & Flag Maps

Pick values, surprise truthy cases, and feature flags.

Example 3 — Choose a Value with `if()`

Return one CSS value or another based on a condition.

styles.scss

@use "sass:meta";

.ternary {
  --a: #{meta.inspect(if(true, 10px, 30px))};
  --b: #{meta.inspect(if(false, 10px, 30px))};
}

How It Works

if($condition, $if-true, $if-false) is handy inside property values when you do not need a whole @if block.

Example 4 — What Is Truthy vs Falsey?

Prove that 0, empty strings, and empty lists are truthy; only false and null fail.

styles.scss

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

$label: "Hello World";
$empty-str: "";
$empty-list: ();

.truth {
  --has-space: #{meta.inspect(string.index($label, " ") != null)};
  --idx: #{meta.inspect(string.index($label, " "))};
  --miss: #{meta.inspect(string.index($label, "x"))};
  --zero: #{meta.inspect(if(0, "truthy", "falsey"))};
  --empty-str: #{meta.inspect(if($empty-str, "truthy", "falsey"))};
  --empty-list: #{meta.inspect(if($empty-list, "truthy", "falsey"))};
  --null: #{meta.inspect(if(null, "truthy", "falsey"))};
  --false: #{meta.inspect(if(false, "truthy", "falsey"))};
}

How It Works

string.index returns a number (truthy) or null (falsey)—a classic pattern from the official docs for “does this contain…?” checks.

Example 5 — Feature Flags in a Map

Combine map lookups with @if and or for optional card styles.

styles.scss

@use "sass:map";
@use "sass:meta";

$flags: (
  "rounded": true,
  "shadow": false,
  "border": true,
);

@mixin card($opts: ()) {
  padding: 1rem;

  @if map.get($opts, "rounded") {
    border-radius: 8px;
  }

  @if map.get($opts, "shadow") {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  @if map.get($opts, "border") or map.get($opts, "outline") {
    border: 1px solid #ccc;
  }
}

.card-a {
  @include card($flags);
}

.card-b {
  @include card(("rounded": false, "shadow": true, "outline": true));
}

.check {
  --both: #{meta.inspect(true and map.has-key($flags, "rounded"))};
}

How It Works

Missing keys from map.get are null (falsey), so unset flags stay off. or lets either border or outline enable a border.

Applications

🚀 Real-World Use Cases

Mixin options — $circle, $responsive, $dark.
Feature flags — maps of toggles for component variants.
Validation — @if not list.index(…) before emitting CSS.
Value switching — if($compact, 0.5rem, 1rem).
Guards — skip rules when a token is missing (null).

🧠 How Compilation Works

Evaluate the condition

Resolve comparisons, helpers, and and/or/not.

Check

Apply truthiness

Treat only false and null as failing conditions.

Truth

Choose the branch

Emit an @if block or pick an if() value.

Branch

CSS ships

Only the chosen styles remain; boolean logic does not.

Watch Out

⚠️ Common Pitfalls

Assuming 0 is falsey — in Sass it is truthy.
Using && / || / ! — Sass wants and / or / not.
Empty string / empty list as “off” — both are truthy.
Forgetting null from helpers — missing keys/indexes are falsey by design.
Expecting runtime toggles — Sass booleans are compile-time only.

Pro Tips

💡 Best Practices

✅ Do

Name flags clearly ($circle, $dark-mode)
Default optional mixin args to false
Use @if for whole rule blocks
Use if() for single property values
Compare explicitly when zero/empty should mean “off”

❌ Don’t

Copy JavaScript operator symbols into Sass
Treat empty lists or 0 as false
Hide complex conditions without parentheses when clarity suffers
Emit both branches when one flag should exclude the other
Expect CSS to re-evaluate Sass @if later

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about Sass booleans

true/false, word operators, and only two falsey values.

Core concepts

✅ 01

true / false

core values

Basics

⚖️ 02

and / or / not

word ops

Logic

🔄 03

@if / if()

gate or pick

Control

🚫 04

Falsey

false & null

Truth

✓ 05

Compile-time

not in CSS

Stage

❓ Frequently Asked Questions

What are Sass booleans?

Booleans are the logical values true and false. They come from literals, equality/relational operators, and many built-in functions such as map.has-key().

How do I combine booleans?

Use word operators: and (both true), or (either true), and not (opposite). Unlike JavaScript, Sass does not use &&, ||, or !.

What values are falsey in Sass?

Only false and null. Empty strings, empty lists, and the number 0 are all truthy.

How do I use a boolean in styles?

Use @if $flag { … } to include a block when the condition is truthy, or if($condition, $if-true, $if-false) to pick one value.

Does @if run in the browser?

No. Boolean logic and @if run at compile time. Browsers only see the CSS that was emitted.

How is string.index useful with booleans?

string.index returns null when a substring is missing (falsey) and a number when found (truthy), so it works directly in @if conditions.

Did you know?

Official Sass docs call out that empty strings, empty lists, and 0 are all truthy—a common surprise for developers coming from JavaScript or PHP.

Wrap Up

Conclusion

Sass booleans are simple true / false values with word operators and a strict truthiness rule: only false and null fail. Use them with @if and if() to shape CSS at compile time.

Continue with Sass null or @if.

View Examples Gallery Sass null

Next: Sass null

Learn absence of a value, omitted CSS, and falsey checks.

Sass null →

About the author

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)

5 people found this page helpful

Sass Maps Sass null

Sass Booleans

What You’ll Learn

true / false

Operators

@if

if()

Truthiness

Practice

What Are Sass Booleans?

📝 Syntax

⚖️ Boolean Operators

🚀 Using Booleans

✅ Truthiness and Falsiness

⚡ Quick Reference

Examples Gallery

📚 Getting Started

Example 1 — Comparisons & and / or / not

How It Works

Example 2 — Optional Styles with @if

How It Works

📈 if(), Truthiness & Flag Maps

Example 3 — Choose a Value with if()

How It Works

Example 4 — What Is Truthy vs Falsey?

How It Works

Example 5 — Feature Flags in a Map

How It Works

🚀 Real-World Use Cases

🧠 How Compilation Works

Evaluate the condition

Apply truthiness

Choose the branch

CSS ships

⚠️ Common Pitfalls

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Five things to remember about Sass booleans

true / false

and / or / not

@if / if()

Falsey

Compile-time

❓ Frequently Asked Questions

🧩 Related Sass & CSS Topics

Sass null

Boolean Operators

@if Rule

Sass Introduction

Conclusion

Next: Sass null

About the author

Example 1 — Comparisons & `and` / `or` / `not`

Example 2 — Optional Styles with `@if`

Example 3 — Choose a Value with `if()`