Boolean values and logic in SASS - Performance & Optimization

Performance: Boolean values and logic

LOW IMPACT

Boolean logic in Sass affects the CSS output size and complexity, impacting CSS parsing and rendering speed.

Using complex nested Boolean logic in Sass to control styles

SASS

$is-primary: true;
$is-active: false;

$should-color-blue: $is-primary;

.button {
  @if $should-color-blue {
    color: blue;
  } else {
    color: gray;
  }
}

Simplifies Boolean logic, reducing Sass compile time and CSS output size.

📈 Performance Gainreduces Sass compile time by up to 30%, smaller CSS output

Using complex nested Boolean logic in Sass to control styles

SASS

$is-primary: true;
$is-active: false;

.button {
  @if $is-primary and not $is-active or ($is-primary and $is-active) {
    color: blue;
  } else {
    color: gray;
  }
}

Complex nested Boolean expressions increase Sass compilation time and generate more complex CSS selectors.

📉 Performance Costincreases Sass compile time by 20-30%, generates larger CSS files

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Complex Boolean logic in Sass	No direct DOM impact	No direct reflows	Higher paint cost due to complex CSS selectors	[X] Bad
Simplified Boolean logic in Sass	No direct DOM impact	No direct reflows	Lower paint cost with simpler CSS selectors	[OK] Good

Rendering Pipeline

Boolean logic in Sass is evaluated during the CSS pre-processing stage before the browser rendering pipeline begins. Efficient logic reduces CSS size and complexity, which speeds up style calculation and paint stages in the browser.

→Style Calculation

→Paint

⚠️ BottleneckStyle Calculation due to complex CSS selectors generated by complicated Boolean logic

Optimization Tips

1Keep Boolean expressions in Sass simple and flat.

2Avoid unnecessary nesting of Boolean logic to reduce CSS output size.

3Test CSS file size after Sass compilation to monitor complexity.

Performance Quiz - 3 Questions

How does complex Boolean logic in Sass affect page performance?

A It directly causes more DOM nodes to be created.

B It increases Sass compile time and CSS file size, slowing down style calculation.

C It reduces the browser's paint time by simplifying styles.

D It has no effect on CSS output or browser rendering.

DevTools: Network

How to check: Open DevTools, go to Network panel, filter by CSS files, and check the size of compiled CSS files generated from Sass.

What to look for: Smaller CSS file size indicates simpler Boolean logic and better performance.

Practice

1. In Sass, which of the following represents a Boolean value?

easy

A. 1

B. "true"

C. "false"

D. true

Solution

1. Step 1: Understand Sass Boolean values

   In Sass, Boolean values are the keywords true and false, not strings or numbers.

2. Step 2: Identify the correct Boolean

   true uses true as a keyword, which is the correct Boolean value in Sass.

3. Final Answer:

   true -> Option D

4. Quick Check:

   Boolean values in Sass are true or false [OK]

Hint: Look for keywords true or false without quotes [OK]

Common Mistakes:

• Confusing strings "true" or "false" with Boolean values
• Using numbers like 1 or 0 as Booleans
• Thinking true/false must be quoted

2. Which of the following is the correct syntax to use a Boolean in an @if statement in Sass?

easy

A. @if $is-active == true { color: blue; }

B. @if $is-active = true { color: blue; }

C. @if $is-active === true { color: blue; }

D. @if $is-active != true { color: blue; }

Solution

1. Step 1: Check Sass comparison operator

   Sass uses == to compare values in @if statements, not = or ===.

2. Step 2: Identify correct syntax

   @if $is-active == true { color: blue; } uses == correctly to compare $is-active with true.

3. Final Answer:

   @if $is-active == true { color: blue; } -> Option A

4. Quick Check:

   Use double equals (==) for comparison in Sass [OK]

Hint: Use double equals (==) for comparisons in @if [OK]

Common Mistakes:

• Using single equals (=) which assigns instead of compares
• Using triple equals (===) which is invalid in Sass
• Using != when checking for true

3. What color will the following Sass code output?

$dark-mode: false;

body {
  @if $dark-mode {
    background-color: black;
  } @else {
    background-color: white;
  }
}

medium

A. white

B. black

C. transparent

D. red

Solution

1. Step 1: Check the Boolean value of $dark-mode

   $dark-mode is set to false, so the @if condition is false.

2. Step 2: Follow the @else branch

   Since the condition is false, the code inside @else runs, setting background-color to white.

3. Final Answer:

   white -> Option A

4. Quick Check:

   False condition triggers @else block [OK]

Hint: False triggers @else styles, not @if [OK]

Common Mistakes:

• Assuming false runs the @if block
• Confusing true/false values
• Ignoring the @else block

4. Identify the error in this Sass code:

$is-visible: true

.container {
  @if $is-visible == true {
    display: block;
  } @else {
    display: none;
  }
}

medium

A. Incorrect use of @else block

B. Wrong comparison operator in @if

C. Missing semicolon after variable declaration

D. Variable name cannot start with $

Solution

1. Step 1: Check variable declaration syntax

   In Sass, variable declarations must end with a semicolon. Here, $is-visible: true is missing a semicolon.

2. Step 2: Verify other syntax

   The comparison operator == and @else block are correct. Variable names can start with $.

3. Final Answer:

   Missing semicolon after variable declaration -> Option C

4. Quick Check:

   Variable declarations need semicolons [OK]

Hint: Check for missing semicolons after variables [OK]

Common Mistakes:

• Forgetting semicolon after variable assignment
• Confusing = and == in @if
• Thinking @else is optional syntax

5. You want to apply a red border only if both $is-error and $is-active are true in Sass. Which code correctly uses Boolean logic to do this?

hard

A. @if $is-error & $is-active { border: 1px solid red; }

B. @if $is-error and $is-active { border: 1px solid red; }

C. @if $is-error && $is-active { border: 1px solid red; }

D. @if $is-error or $is-active { border: 1px solid red; }

Solution

1. Step 1: Understand Sass Boolean operators

   Sass uses the keyword and for logical AND, not symbols like && or &.

2. Step 2: Identify correct syntax

   @if $is-error and $is-active { border: 1px solid red; } correctly uses and to check if both variables are true before applying the border.

3. Final Answer:

   @if $is-error and $is-active { border: 1px solid red; } -> Option B

4. Quick Check:

   Use and for logical AND in Sass [OK]

Hint: Use 'and' keyword for AND logic in Sass [OK]

Common Mistakes:

• Using && or & which are invalid in Sass
• Using 'or' instead of 'and' for both true
• Confusing bitwise & with logical and