@if conditional logic in SASS - Performance & Optimization

Performance: @if conditional logic

LOW IMPACT

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

Generating CSS styles conditionally based on variables

SASS

@mixin button-style($type) {
  color: black;
  background: white;
  @if $type == 'primary' {
    background: blue;
    color: white;
  } @else if $type == 'secondary' {
    background: gray;
  }
}

.button-primary {
  @include button-style('primary');
}

.button-secondary {
  @include button-style('secondary');
}

Generates only the needed CSS for each button type, avoiding duplication and reducing file size.

📈 Performance Gainreduces CSS file size, improving LCP and load speed

Generating CSS styles conditionally based on variables

SASS

@mixin button-style($type) {
  color: black;
  background: white;
  @if $type == 'primary' {
    background: blue;
    color: white;
  }
  @if $type == 'secondary' {
    background: gray;
  }
}

.button-primary {
  @include button-style('primary');
}

.button-secondary {
  @include button-style('secondary');
}

Including multiple conditional styles for all types causes duplicated CSS rules and larger file size.

📉 Performance Costadds unnecessary CSS bytes, increasing CSS file size and slowing LCP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using multiple @if blocks generating duplicated CSS	N/A	N/A	Higher due to larger CSS	[X] Bad
Using @if with else-if to generate minimal CSS	N/A	N/A	Lower due to smaller CSS	[OK] Good

Rendering Pipeline

Sass @if conditions are evaluated at compile time, affecting the CSS output size which impacts the browser's CSS parsing and rendering speed.

→CSS Parsing

→Style Calculation

→Layout

⚠️ 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, impacting initial page load speed.

Optimization Tips

1Use @if to generate only the CSS you need to keep file size small.

2Avoid multiple separate @if blocks that create duplicated CSS rules.

3Smaller CSS files improve page load speed and LCP.

Performance Quiz - 3 Questions

How does using @if conditional logic in Sass affect page performance?

A It increases DOM nodes in the browser.

B It reduces CSS file size by generating only needed styles.

C It causes more JavaScript execution on the client.

D It delays image loading on the page.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by CSS files, and check CSS file size.

What to look for: Smaller CSS file size indicates better use of conditional logic reducing unnecessary styles.

Practice

1. What does the @if directive do in Sass?

easy

A. It defines a variable.

B. It loops through a list of items.

C. It imports other Sass files.

D. It applies styles only if a condition is true.

Solution

1. Step 1: Understand the purpose of @if

   The @if directive checks a condition and applies styles only when that condition is true.

2. Step 2: Compare with other options

   Looping is done with @for or @each, importing with @import, and variables are defined with $.

3. Final Answer:

   It applies styles only if a condition is true. -> Option D

4. Quick Check:

   @if = conditional style application [OK]

Hint: Remember: @if controls styles by conditions [OK]

Common Mistakes:

• Confusing @if with loops or imports
• Thinking @if defines variables
• Assuming @if always runs styles

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

easy

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

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

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

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

Solution

1. Step 1: Check the correct comparison operator

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

2. Step 2: Verify syntax structure

   The correct syntax is @if $variable == value { ... } without parentheses around the condition.

3. Final Answer:

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

4. Quick Check:

   Use == for comparison in @if [OK]

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

Common Mistakes:

• Using single equals (=) instead of double (==)
• Adding parentheses around condition
• Using JavaScript style === or =>

3. What will be the output CSS of this Sass code?

$theme: dark;

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

medium

A. body { background: black; color: white; }

B. body { background: white; color: black; }

C. body { background: gray; color: black; }

D. No output due to syntax error

Solution

1. Step 1: Check the value of $theme

   The variable $theme is set to dark.

2. Step 2: Evaluate the @if conditions

   The first condition $theme == light is false, so it skips to @else if $theme == dark, which is true. So it applies background: black; and color: white;.

3. Final Answer:

   body { background: black; color: white; } -> Option A

4. Quick Check:

   $theme = dark triggers @else if dark block [OK]

Hint: Match variable value to @if conditions carefully [OK]

Common Mistakes:

• Choosing first @if block without checking variable
• Ignoring @else if and @else blocks
• Assuming syntax error without checking carefully

4. Identify the error in this Sass code:

$size: 10px;

.box {
  @if $size > 5 {
    width: $size;
  } @else if $size < 5 {
    width: 5px;
  }
}

medium

A. Missing @else block for equal size case.

B. Units like px cannot be compared directly in @if.

C. Comparison operators like > and < are not allowed in @if.

D. Variable $size should be declared inside the block.

Solution

1. Step 1: Understand unit comparison in Sass

   Sass does not allow direct comparison of values with units like 10px > 5 in @if conditions.

2. Step 2: Check other options

   Comparison operators are allowed, @else block is optional, and variables can be declared outside blocks.

3. Final Answer:

   Units like px cannot be compared directly in @if. -> Option B

4. Quick Check:

   Cannot compare px units directly in @if [OK]

Hint: Avoid comparing units directly; use numbers or functions [OK]

Common Mistakes:

• Thinking > and < are invalid operators
• Assuming @else is mandatory
• Declaring variables only inside blocks

5. You want to set a button's background color based on a variable $status that can be 'success', 'warning', or 'error'. Which Sass code correctly uses @if conditional logic to apply green for success, yellow for warning, and red for error, with a default gray if none match?

hard

A. @if $status = success {
background: green;
} @else if $status == warning {
background: yellow;
} @else if $status == error {
background: red;
} @else {
background: gray;
}

B. @if $status = 'success' {
background: green;
} @else if $status = 'warning' {
background: yellow;
} @else if $status = 'error' {
background: red;
} @else {
background: gray;
}

C. @if $status == 'success' {
background: green;
} @else if $status == 'warning' {
background: yellow;
} @else if $status == 'error' {
background: red;
} @else {
background: gray;
}

D. @if $status === 'success' {
background: green;
} @else if $status === 'warning' {
background: yellow;
} @else if $status === 'error' {
background: red;
} @else {
background: gray;
}

Solution

1. Step 1: Check string comparison syntax

   In Sass, string values must be quoted and compared with ==, not = or ===.

2. Step 2: Verify the use of quotes around strings

   Options A and B miss quotes or use wrong operators; @if $status === 'success' { background: green; } @else if $status === 'warning' { background: yellow; } @else if $status === 'error' { background: red; } @else { background: gray; } uses === which is invalid in Sass.

3. Final Answer:

   @if $status == 'success' { background: green; } @else if $status == 'warning' { background: yellow; } @else if $status == 'error' { background: red; } @else { background: gray; } -> Option C

4. Quick Check:

   Use == and quotes for string comparison in @if [OK]

Hint: Compare strings with == and quotes in @if [OK]

Common Mistakes:

• Using single equals (=) instead of double (==)
• Omitting quotes around strings
• Using JavaScript style === operator