Boolean values and logic in SASS - Browser Rendering Trace

Render Flow - Boolean values and logic

Parse SASS file

↓

Identify variables and values

↓

Evaluate boolean expressions

↓

Apply conditional logic

↓

Generate CSS output

The SASS processor reads the file, evaluates boolean values and logic expressions, then uses the results to decide which CSS rules to generate.

Render Steps - 3 Steps

Code Added:$is-active: true;

Before

[box]
Content

→

After

[box]
Content

Declared a boolean variable $is-active with value true. No visual change yet because CSS is not applied.

🔧 Browser Action:Stores variable in SASS environment, no CSS output yet.

Code Sample

A box with green background if $is-active is true, otherwise red background.

SASS

<div class="box">Content</div>

SASS

$is-active: true;

.box {
  @if $is-active {
    background-color: green;
  } @else {
    background-color: red;
  }
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
}

Render Quiz - 3 Questions

After applying step 2, what background color does the box have?

A Red

B Green

C Blue

D No background color

Common Confusions - 3 Topics

Why does @if $is-active { ... } run when $is-active is true but not when false?

Because SASS treats true as a condition that passes and false as one that fails, so the block inside @if runs only when the condition is true (see render_step 2).

💡 Think of true as 'go' and false as 'stop' for applying styles.

What happens if I use a string like 'true' instead of boolean true?

SASS treats strings differently from booleans, so 'true' (a string) is truthy but not the same as boolean true; this can cause unexpected results in @if conditions.

💡 Use boolean true/false without quotes for logic checks.

Can I combine multiple boolean conditions in SASS?

Yes, using and/or/not operators lets you combine conditions to control styles precisely (see property_table).

💡 Use and/or to join conditions, not to invert them.

Property Reference

SASS Boolean	Value	Effect in Logic	Example Usage
true	Boolean true	Condition passes	$is-active: true; @if $is-active { ... }
false	Boolean false	Condition fails	$is-active: false; @if $is-active { ... } @else { ... }
not	Negation	Inverts boolean	@if not $is-active { ... }
and	Logical AND	Both must be true	@if $a and $b { ... }
or	Logical OR	Either can be true	@if $a or $b { ... }

Concept Snapshot

SASS boolean values are true or false. Use @if, @else to apply styles conditionally. Boolean true runs the @if block; false runs @else. Combine with and, or, not for complex logic. Boolean logic controls which CSS is generated.