Chained extensions in SASS - Performance & Optimization

Performance: Chained extensions

MEDIUM IMPACT

Chained extensions affect CSS compilation time and the final CSS size, impacting page load speed and rendering performance.

Reusing styles with Sass @extend in a chain

SASS

%base-style { font-size: 1rem; margin: 1rem; padding: 1rem; }
.button { @extend %base-style; background: blue; color: black; }

Using a single @extend avoids deep selector chains and reduces duplicated styles, resulting in smaller CSS and faster rendering.

📈 Performance GainReduces CSS size by 20-30%, lowers style recalculations, and improves LCP by up to 100ms.

Reusing styles with Sass @extend in a chain

SASS

@mixin base { color: black; }
%base-style { font-size: 1rem; }
%extended-style { @extend %base-style; margin: 1rem; }
%final-style { @extend %extended-style; padding: 1rem; }
.button { @extend %final-style; background: blue; }

Chaining multiple @extend selectors creates complex CSS selectors and duplicates styles, increasing CSS size and slowing down browser rendering.

📉 Performance CostIncreases CSS file size by 20-30%, triggers more style recalculations, and delays LCP by 50-100ms on average.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Long chained @extend selectors	No direct DOM changes	Triggers multiple style recalculations	Higher paint cost due to complex styles	[X] Bad
Single-level @extend with consolidated styles	No direct DOM changes	Minimal style recalculations	Lower paint cost with simpler styles	[OK] Good

Rendering Pipeline

Chained Sass extensions increase the complexity of generated CSS selectors, which the browser must parse and apply during Style Calculation and Layout stages.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to complex and duplicated selectors

Core Web Vital Affected

LCP

Chained extensions affect CSS compilation time and the final CSS size, impacting page load speed and rendering performance.

Optimization Tips

1Avoid deep chains of Sass @extend to keep CSS simple.

2Consolidate shared styles into single placeholders to reduce duplication.

3Smaller, simpler CSS improves browser style calculation and page load speed.

Performance Quiz - 3 Questions

What is a main performance drawback of using chained Sass @extend selectors?

A They cause more JavaScript to run on the page.

B They reduce the number of CSS selectors, improving performance.

C They increase CSS file size and complexity, slowing style calculation.

D They prevent the browser from caching CSS files.

DevTools: Performance

How to check: Record a performance profile while loading the page, then inspect the 'Style Recalculation' and 'Layout' events to see if complex selectors cause delays.

What to look for: Look for long style recalculation times and large CSS files in the Network panel indicating chained extensions impact.

Practice

1. What does chaining @extend in Sass allow you to do?

easy

A. Create new CSS properties automatically

B. Make one selector inherit styles from another that already extends a base style

C. Compile Sass into JavaScript

D. Add inline styles directly in HTML

Solution

1. Step 1: Understand @extend basics

   @extend lets one selector reuse styles from another selector or placeholder.

2. Step 2: Recognize chaining effect

   Chaining means a selector extends another selector that itself extends a base style, passing styles along.

3. Final Answer:

   Make one selector inherit styles from another that already extends a base style -> Option B

4. Quick Check:

   Chained @extend = inherit styles step-by-step [OK]

Hint: Think of style inheritance passing through selectors [OK]

Common Mistakes:

• Confusing @extend with creating new CSS properties
• Thinking @extend compiles to JavaScript
• Believing @extend adds inline HTML styles

2. Which of the following is the correct syntax to chain extensions in Sass?

easy

A. .button {@extend base;}
.primary {@extend button;}

B. .button {extend %base;}
.primary {extend .button;}

C. .button {@extend %base;}
.primary {@extend .button;}

D. .button {@extends %base;}
.primary {@extends .button;}

Solution

1. Step 1: Identify correct @extend syntax

   The correct syntax uses @extend keyword with a percent sign for placeholders and dot for classes.

2. Step 2: Check chaining format

   Chaining means one selector extends a placeholder, another extends that selector, both using @extend.

3. Final Answer:

   .button {@extend %base;} .primary {@extend .button;} -> Option C

4. Quick Check:

   Correct @extend syntax uses @extend keyword and proper selector symbols [OK]

Hint: Remember to use @extend with % for placeholders and . for classes [OK]

Common Mistakes:

• Omitting the @ symbol before extend
• Using 'extends' instead of 'extend'
• Missing % for placeholders or . for classes

3. Given the Sass code:

%base { color: blue; }
.button {@extend %base; font-weight: bold;}
.primary {@extend .button; background: yellow; }

What CSS will be generated for .primary?

medium

A. .primary { color: blue; font-weight: bold; background: yellow; }

B. .primary { font-weight: bold; background: yellow; }

C. .primary { color: blue; background: yellow; }

D. .primary { background: yellow; }

Solution

1. Step 1: Trace @extend chain

   .button extends %base, so it gets color: blue;. .primary extends .button, so it inherits both color: blue; and font-weight: bold;.

2. Step 2: Combine styles for .primary

   .primary adds background: yellow; to inherited styles, so final CSS includes all three properties.

3. Final Answer:

   .primary { color: blue; font-weight: bold; background: yellow; } -> Option A

4. Quick Check:

   Chained extensions combine all inherited styles [OK]

Hint: Follow the chain from placeholder to final selector [OK]

Common Mistakes:

• Ignoring inherited styles from extended selectors
• Only applying direct styles of .primary
• Confusing placeholders with classes in output

4. What is wrong with this Sass code?

%base { color: red; }
.button { @extend %base }
.primary { @extend .button; }

medium

A. Cannot chain extensions in Sass

B. Cannot extend a placeholder with @extend

C. Class selectors cannot extend placeholders

D. Missing semicolon after @extend %base

Solution

1. Step 1: Check @extend syntax

   Every @extend statement must end with a semicolon. The line @extend %base is missing it.

2. Step 2: Verify chaining and placeholders

   Extending placeholders and chaining extensions are valid in Sass, so no error there.

3. Final Answer:

   Missing semicolon after @extend %base -> Option D

4. Quick Check:

   Always end @extend with semicolon [OK]

Hint: Check for missing semicolons after @extend [OK]

Common Mistakes:

• Thinking chaining extensions is invalid
• Believing placeholders can't be extended
• Forgetting semicolons after statements

5. You want to create a base button style and two variants: .primary and .secondary. Using chained extensions, which Sass code correctly shares the base styles and adds variant colors?

hard

A. %button-base { padding: 1rem; border-radius: 0.5rem; }
.button {@extend %button-base;}
.primary {@extend .button; background: blue;}
.secondary {@extend .button; background: gray;}

B. .button-base { padding: 1rem; border-radius: 0.5rem; }
.primary {@extend .button-base; background: blue;}
.secondary {@extend .button-base; background: gray;}

C. .button-base { padding: 1rem; border-radius: 0.5rem; }
.button {@extend .button-base;}
.primary {@extend .button; background: blue;}
.secondary {@extend .button; background: gray;}

D. %button-base { padding: 1rem; border-radius: 0.5rem; }
.primary {@extend %button-base; background: blue;}
.secondary {@extend %button-base; background: gray;}

Solution

1. Step 1: Use placeholder for base styles

   Base styles should be in a placeholder (%button-base) to avoid generating extra CSS.

2. Step 2: Chain extensions for variants

   .button extends %button-base, then .primary and .secondary extend .button, inheriting base styles and adding colors.

3. Final Answer:

   %button-base { padding: 1rem; border-radius: 0.5rem; } .button {@extend %button-base;} .primary {@extend .button; background: blue;} .secondary {@extend .button; background: gray;} -> Option A

4. Quick Check:

   Use placeholders and chain extensions for clean, reusable styles [OK]

Hint: Put base styles in %placeholder, chain extensions for variants [OK]

Common Mistakes:

• Using class selectors instead of placeholders for base styles
• Not chaining extensions, repeating base styles
• Extending classes that don't extend placeholders