@else and @else if branches in SASS - Performance & Optimization

Performance: @else and @else if branches

LOW IMPACT

This affects CSS compilation time and the size of the generated CSS file, which impacts page load speed.

Writing conditional styles in Sass to avoid duplicate CSS rules

SASS

@if $font-scale >= 1.5 {
  h1 {
    font-size: 3rem;
  }
} @else if $font-scale >= 1.0 {
  h1 {
    font-size: 2rem;
  }
}

Using @else if chains stops evaluation once a condition matches, reducing generated CSS and compile work.

📈 Performance Gainreduces CSS file size and compilation time

Writing conditional styles in Sass to avoid duplicate CSS rules

SASS

@if $font-scale >= 1.5 {
  h1 {
    font-size: 3rem;
  }
}
@if $font-scale >= 1.0 {
  h1 {
    font-size: 2rem;
  }
}

Using separate @if statements causes Sass to evaluate all conditions independently, potentially generating redundant CSS.

📉 Performance Costincreases CSS file size and compilation time slightly

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Separate @if statements	N/A	N/A	Larger CSS file increases parsing time	[X] Bad
@if with @else if branches	N/A	N/A	Smaller CSS file reduces parsing time	[OK] Good

Rendering Pipeline

Sass @else and @else if branches affect the CSS generation step before the browser rendering pipeline. Efficient branching reduces CSS size, which speeds up CSS parsing and style calculation in the browser.

→CSS Parsing

→Style Calculation

⚠️ BottleneckCSS Parsing due to larger CSS files

Core Web Vital Affected

LCP

This affects CSS compilation time and the size of the generated CSS file, which impacts page load speed.

Optimization Tips

1Use @else and @else if to avoid generating duplicate CSS rules.

2Smaller CSS files load and parse faster, improving LCP.

3Avoid multiple separate @if statements when conditions are mutually exclusive.

Performance Quiz - 3 Questions

How does using @else if instead of separate @if statements in Sass affect CSS performance?

A It triggers more reflows in the browser

B It reduces CSS file size and speeds up CSS parsing

C It increases the number of DOM nodes

D It has no effect on performance

DevTools: Network

How to check: Open DevTools, go to Network tab, filter by CSS files, and compare file sizes of generated CSS with and without @else if usage.

What to look for: Smaller CSS file size indicates better performance; also check load time for CSS files.

Practice

1. What does the @else if branch do in Sass?

easy

A. Runs only if all previous conditions were true

B. Repeats the first @if condition

C. Ends the conditional statement immediately

D. Checks another condition if the previous @if was false

Solution

1. Step 1: Understand @if and @else if roles

   The @if checks the first condition. If false, @else if checks another condition.

2. Step 2: Identify @else if behavior

   @else if only runs if the previous @if or @else if was false, allowing multiple checks.

3. Final Answer:

   Checks another condition if the previous @if was false -> Option D

4. Quick Check:

   @else if = checks next condition [OK]

Hint: Remember: @else if checks next condition only if previous fails [OK]

Common Mistakes:

• Thinking @else if runs when previous is true
• Confusing @else if with @else
• Believing @else if ends the condition chain

2. Which of the following is the correct syntax for using @else if in Sass?

easy

A. @elseif $color == red { color: red; }

B. @else if $color == red { color: red; }

C. @else if ($color == red) { color: red; }

D. @else if $color = red { color: red; }

Solution

1. Step 1: Recall correct @else if syntax

   In Sass, @else if is written as two words without parentheses around the condition.

2. Step 2: Check each option

   @else if $color == red { color: red; } uses correct syntax: @else if $color == red { ... }. @elseif $color == red { color: red; } misses space. @else if ($color == red) { color: red; } uses parentheses which Sass does not require. @else if $color = red { color: red; } uses single equals which is assignment, not comparison.

3. Final Answer:

   @else if $color == red { color: red; } -> Option B

4. Quick Check:

   Correct @else if syntax = @else if $color == red { color: red; } [OK]

Hint: Use space and double equals, no parentheses for @else if [OK]

Common Mistakes:

• Writing @elseif as one word
• Using parentheses around condition
• Using single equals instead of double equals

3. What color will be applied by this Sass code?

$color: blue;

@if $color == red {
  background: red;
} @else if $color == green {
  background: green;
} @else {
  background: black;
}

medium

A. black

B. green

C. blue

D. red

Solution

1. Step 1: Check the value of $color

   The variable $color is set to blue.

2. Step 2: Evaluate conditions in order

   First @if checks if $color == red (false). Then @else if checks if $color == green (false). Since both are false, @else runs, setting background to black.

3. Final Answer:

   black -> Option A

4. Quick Check:

   None matched, so @else runs = black [OK]

Hint: If no @if or @else if matches, @else runs [OK]

Common Mistakes:

• Assuming @else if runs when condition is false
• Thinking @else is optional and skipped
• Confusing variable value with condition

4. Identify the error in this Sass code snippet:

@if $size == large {
  font-size: 2rem;
} @else if $size = medium {
  font-size: 1.5rem;
} @else {
  font-size: 1rem;
}

medium

A. Incorrect use of curly braces in @else

B. Missing semicolon after @if condition

C. Using single equals (=) instead of double equals (==) in @else if

D. Variable $size is not declared

Solution

1. Step 1: Check condition operators

   In Sass, conditions use double equals == to compare values, not single equals = which assigns values.

2. Step 2: Locate the error

   The @else if line uses $size = medium which is assignment, causing a syntax error.

3. Final Answer:

   Using single equals (=) instead of double equals (==) in @else if -> Option C

4. Quick Check:

   Comparison needs ==, not = [OK]

Hint: Use == for comparisons, = is for assignments [OK]

Common Mistakes:

• Using = instead of ==
• Forgetting to declare variables
• Misplacing curly braces

5. Given this Sass code, what will be the background color if $theme is set to null?

$theme: null;

@if $theme == light {
  background: white;
} @else if $theme == dark {
  background: black;
} @else {
  background: gray;
}

hard

A. gray

B. black

C. white

D. null

Solution

1. Step 1: Understand null in Sass conditions

   null is a special value that does not equal strings like light or dark.

2. Step 2: Evaluate conditions with $theme = null

   Both @if $theme == light and @else if $theme == dark are false. So, @else runs, setting background to gray.

3. Final Answer:

   gray -> Option A

4. Quick Check:

   null matches no condition, so @else runs [OK]

Hint: null never equals strings; @else handles it [OK]

Common Mistakes:

• Assuming null equals a string
• Forgetting @else runs when no conditions match
• Expecting null to output literally