Theming with mixins in SASS - Performance & Optimization

Performance: Theming with mixins

MEDIUM IMPACT

This affects CSS generation size and browser style recalculation speed when themes change.

Applying multiple themes using mixins in Sass

SASS

:root {
  --color-primary: red;
  --color-secondary: blue;
}

@mixin theme-colors {
  color: var(--color-primary);
  background-color: var(--color-secondary);
}

.button {
  @include theme-colors;
}

/* Changing theme only updates CSS variables, no extra CSS generated */

Uses CSS variables with mixins to keep CSS size small and enable fast theme switching without style recalculation.

📈 Performance GainSingle CSS block reused; theme changes only update variables, reducing style recalculations and CSS size.

Applying multiple themes using mixins in Sass

SASS

@mixin theme-colors($primary, $secondary) {
  color: $primary;
  background-color: $secondary;
}

.button {
  @include theme-colors(red, blue);
}

.card {
  @include theme-colors(green, yellow);
}

/* Repeated mixin calls generate duplicated CSS for each theme */

Each mixin call generates separate CSS rules, increasing CSS size and causing longer style recalculations.

📉 Performance CostAdds extra CSS bytes proportional to number of theme variations; increases style recalculation time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated mixin calls with hardcoded colors	None	None	High due to large CSS and style recalculations	[X] Bad
Mixin using CSS variables for colors	None	None	Low, minimal CSS size and fast style recalculation	[OK] Good

Rendering Pipeline

Mixins generate CSS during build time. Large repeated mixin usage increases CSS size, affecting style calculation and paint. Using CSS variables with mixins reduces CSS size and speeds up style recalculation during theme changes.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to large CSS and frequent theme changes

Core Web Vital Affected

LCP

This affects CSS generation size and browser style recalculation speed when themes change.

Optimization Tips

1Avoid repeating mixins with hardcoded values to prevent CSS bloat.

2Use CSS variables inside mixins for flexible, small CSS and fast theme switching.

3Test theme changes in DevTools Performance panel to catch style recalculation bottlenecks.

Performance Quiz - 3 Questions

What is a main performance benefit of using CSS variables inside Sass mixins for theming?

A Increases CSS specificity for better style overrides

B Reduces CSS file size and speeds up style recalculation on theme changes

C Automatically caches CSS for offline use

D Prevents any reflows during page load

DevTools: Performance

How to check: Record a performance profile while switching themes or loading the page. Look for long style recalculation or layout times.

What to look for: High 'Recalculate Style' or 'Layout' times indicate inefficient theming; low times indicate optimized CSS variable usage.

Practice

1. What is the main purpose of using @mixin in Sass theming?

easy

A. To write plain CSS without nesting

B. To create reusable style blocks that can accept parameters

C. To import external CSS files

D. To define variables for colors and fonts

Solution

1. Step 1: Understand the role of @mixin

   @mixin defines reusable style blocks that can be included multiple times.

2. Step 2: Recognize parameter use in mixins

   Mixins can accept parameters to customize styles like colors or fonts.

3. Final Answer:

   To create reusable style blocks that can accept parameters -> Option B

4. Quick Check:

   @mixin = reusable styles [OK]

Hint: Mixins reuse styles with parameters, not variables or imports [OK]

Common Mistakes:

• Confusing mixins with variables
• Thinking mixins import files
• Assuming mixins write plain CSS only

2. Which of the following is the correct syntax to include a mixin named theme-colors with a parameter $main-color set to blue?

easy

A. @include theme-colors($main-color: blue);

B. @mixin theme-colors($main-color: blue);

C. @include theme-colors blue;

D. @mixin theme-colors($main-color) { blue; }

Solution

1. Step 1: Identify the correct way to apply a mixin

   Mixins are applied using @include, not @mixin.

2. Step 2: Check parameter passing syntax

   Parameters are passed inside parentheses with variable names and values, like ($main-color: blue).

3. Final Answer:

   @include theme-colors($main-color: blue); -> Option A

4. Quick Check:

   @include + parameters = @include theme-colors($main-color: blue); [OK]

Hint: Use @include with parentheses and named parameters [OK]

Common Mistakes:

• Using @mixin instead of @include to apply mixins
• Passing parameters without parentheses
• Confusing mixin definition and usage syntax

3. Given the Sass code:

@mixin theme($color) {
  background-color: $color;
  color: white;
}

.button {
  @include theme(red);
}

What will be the background color of the .button class in the compiled CSS?

medium

A. transparent

B. white

C. red

D. black

Solution

1. Step 1: Understand the mixin parameter usage

   The mixin theme sets background-color to the passed parameter $color.

2. Step 2: Check the included value

   The mixin is included with red, so background-color becomes red.

3. Final Answer:

   red -> Option C

4. Quick Check:

   Mixin parameter sets background-color = red [OK]

Hint: Mixin parameter directly sets background-color [OK]

Common Mistakes:

• Confusing text color with background color
• Assuming default colors override mixin
• Ignoring parameter passed to mixin

4. Identify the error in this Sass code snippet:

@mixin theme($color) {
  background-color: $color;
  color: white;
}

.button {
  @include theme;
}

medium

A. Missing semicolon after mixin definition

B. Mixin name is misspelled

C. Cannot use color property inside mixin

D. Mixin is included without required parameter

Solution

1. Step 1: Check mixin definition

   The mixin theme requires one parameter $color.

2. Step 2: Check mixin usage

   The mixin is included without any parameter, which causes an error.

3. Final Answer:

   Mixin is included without required parameter -> Option D

4. Quick Check:

   Missing parameter in @include = Mixin is included without required parameter [OK]

Hint: Always pass required parameters when including mixins [OK]

Common Mistakes:

• Forgetting to pass parameters to mixins
• Assuming default parameters without defining them
• Ignoring error messages about missing arguments

5. You want to create a theme mixin that sets background and text colors, but if no text color is provided, it should default to black. Which mixin definition correctly implements this behavior?

hard

A. @mixin theme($bg-color, $text-color: black) {
background-color: $bg-color;
color: $text-color;
}

B. @mixin theme($bg-color, $text-color) {
background-color: $bg-color;
color: if($text-color, $text-color, black);
}

C. @mixin theme($bg-color) {
background-color: $bg-color;
color: black;
}

D. @mixin theme($bg-color, $text-color) {
background-color: $bg-color;
color: $text-color;
}

Solution

1. Step 1: Understand default parameter usage

   In Sass, default values for parameters are set using $param: default syntax.

2. Step 2: Check each option for default text color

   @mixin theme($bg-color, $text-color: black) { background-color: $bg-color; color: $text-color; } sets $text-color default to black, so if omitted, black is used.

3. Step 3: Verify other options

   @mixin theme($bg-color, $text-color) { background-color: $bg-color; color: if($text-color, $text-color, black); } tries to use if() function incorrectly; @mixin theme($bg-color) { background-color: $bg-color; color: black; } lacks text color parameter; @mixin theme($bg-color, $text-color) { background-color: $bg-color; color: $text-color; } has no default.

4. Final Answer:

   @mixin theme($bg-color, $text-color: black) { background-color: $bg-color; color: $text-color; } -> Option A

5. Quick Check:

   Default parameter syntax = @mixin theme($bg-color, $text-color: black) { background-color: $bg-color; color: $text-color; } [OK]

Hint: Use default parameter values with $param: default syntax [OK]

Common Mistakes:

• Trying to set defaults inside mixin body instead of parameters
• Using if() function incorrectly for defaults
• Omitting parameters needed for theming