Conditional mixins with @if in SASS - Performance & Optimization

Performance: Conditional mixins with @if

MEDIUM IMPACT

This affects CSS generation size and browser style recalculation during rendering.

Applying styles conditionally to reduce CSS output

SASS

@mixin button-style($type) {
  color: black;
  background: white;
  border: 1px solid gray;
  @if $type == 'primary' {
    background: blue;
    color: white;
  } @else if $type == 'secondary' {
    background: gray;
  } @else if $type == 'danger' {
    background: red;
    color: yellow;
  }
}

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

Uses mutually exclusive conditions to avoid generating multiple conflicting styles, reducing CSS size and improving rendering.

📈 Performance GainSaves ~1-2kb CSS and reduces style recalculations, improving LCP by a few milliseconds.

Applying styles conditionally to reduce CSS output

SASS

@mixin button-style($type) {
  color: black;
  background: white;
  border: 1px solid gray;
  @if $type == 'primary' {
    background: blue;
    color: white;
  }
  @if $type == 'secondary' {
    background: gray;
  }
  @if $type == 'danger' {
    background: red;
    color: yellow;
  }
}

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

Generates all styles inside the mixin, including unused conditional blocks, increasing CSS size and causing unnecessary style recalculations.

📉 Performance CostAdds extra CSS rules increasing bundle size by ~1-2kb and triggers more style recalculations on load.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Conditional mixins with multiple @if blocks	No direct DOM impact	Triggers multiple style recalculations	Higher paint cost due to redundant styles	[X] Bad
Conditional mixins with @if/@else if chain	No direct DOM impact	Single style recalculation per element	Lower paint cost with minimal styles	[OK] Good

Rendering Pipeline

Conditional mixins affect the CSS generation step before the browser parses styles. Smaller CSS means faster style calculation and layout.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation

Core Web Vital Affected

LCP

This affects CSS generation size and browser style recalculation during rendering.

Optimization Tips

1Use @if/@else if chains to avoid generating redundant CSS rules.

2Minimize conditional blocks inside mixins to reduce CSS size.

3Smaller CSS leads to faster style calculation and better LCP.

Performance Quiz - 3 Questions

What is the main performance benefit of using @if/@else if chains in Sass mixins?

A It delays CSS loading to improve initial paint.

B It increases the number of DOM nodes for better layout.

C It reduces the generated CSS size by avoiding redundant styles.

D It automatically compresses CSS files.

DevTools: Performance

How to check: Record a page load and look at the 'Style Recalculation' events in the flame chart to see how many times styles are recalculated.

What to look for: Fewer style recalculation events and shorter duration indicate better CSS performance from conditional mixins.