@extend directive in SASS - Performance & Optimization

Performance: @extend directive

MEDIUM IMPACT

This affects CSS bundle size and browser rendering performance by duplicating or merging selectors.

Reusing styles across multiple selectors

SASS

.btn-primary, .btn-secondary { color: blue; padding: 1rem; }

Combines selectors to share styles, reducing CSS size and improving load speed.

📈 Performance GainSaves CSS bytes, improving LCP by reducing CSS download and parse time.

Reusing styles across multiple selectors

SASS

.btn-primary { color: blue; padding: 1rem; }
.btn-secondary { color: blue; padding: 1rem; }

Repeats same styles in multiple selectors, increasing CSS size and download time.

📉 Performance CostAdds extra CSS bytes, increasing LCP by a few milliseconds on slow networks.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated styles without @extend	No extra DOM operations	0	Low	[X] Bad
@extend with complex selectors	No extra DOM operations	0	Medium due to complex style calculation	[!] OK
Manual selector grouping	No extra DOM operations	0	Low	[OK] Good

Rendering Pipeline

The @extend directive affects CSS generation, which impacts style calculation and layout stages in the browser rendering pipeline.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to complex merged selectors

Core Web Vital Affected

LCP

This affects CSS bundle size and browser rendering performance by duplicating or merging selectors.

Optimization Tips

1Avoid using @extend with complex selectors to prevent slow style calculation.

2Prefer manual selector grouping for shared styles to keep CSS simple.

3Monitor style recalculation times in DevTools to detect costly CSS selectors.

Performance Quiz - 3 Questions

What is a main performance risk of using @extend with complex selectors?

A It causes extra DOM nodes to be created.

B It increases CSS file size by duplicating all styles.

C It creates complex merged selectors that slow style calculation.

D It blocks JavaScript execution during page load.

DevTools: Performance

How to check: Record a performance profile while loading the page and inspect the 'Style Recalculation' events.

What to look for: Long style recalculation times or many complex selector matches indicate costly CSS selectors from @extend.

Practice

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

easy

A. It defines a variable.

B. It creates a new CSS property.

C. It imports external CSS files.

D. It allows one selector to reuse styles from another selector.

Solution

1. Step 1: Understand the purpose of @extend

   The @extend directive is used to share styles between selectors in Sass.

2. Step 2: Identify what @extend does

   It copies the styles of one selector into another, reducing repetition.

3. Final Answer:

   It allows one selector to reuse styles from another selector. -> Option D

4. Quick Check:

   @extend = reuse styles [OK]

Hint: Remember: @extend shares styles between selectors [OK]

Common Mistakes:

• Thinking @extend creates new properties
• Confusing @extend with imports
• Using @extend to define variables

2. Which of the following is the correct syntax to extend styles from .button to .submit in Sass?

easy

A. .submit { @extend .button; }

B. .submit { extend(@button); }

C. .submit { @extend .button(); }

D. .submit { @extend '#button'; }

Solution

1. Step 1: Recall correct @extend syntax

   The correct syntax is @extend followed by the selector name without quotes or parentheses.

2. Step 2: Check each option

   .submit { @extend .button; } uses @extend .button; which is correct. Others use wrong syntax like parentheses or quotes.

3. Final Answer:

   .submit { @extend .button; } -> Option A

4. Quick Check:

   Correct syntax = @extend .selector; [OK]

Hint: Use @extend followed by selector without quotes or parentheses [OK]

Common Mistakes:

• Adding parentheses after selector
• Using quotes around selector
• Using wrong function-like syntax

3. Given this Sass code:

.alert { color: red; font-weight: bold; }
.error { @extend .alert; }

What CSS will be generated?

medium

A. .alert { color: red; font-weight: bold; } .error { color: red; font-weight: bold; }

B. .alert, .error { color: red; font-weight: bold; }

C. .error { color: red; font-weight: bold; }

D. .alert { color: red; } .error { font-weight: bold; }

Solution

1. Step 1: Understand @extend output

   @extend merges selectors so they share the same style block.

2. Step 2: Apply to given code

   Both .alert and .error share the same styles in one combined selector.

3. Final Answer:

   .alert, .error { color: red; font-weight: bold; } -> Option B

4. Quick Check:

   Selectors combined with @extend [OK]

Hint: Remember: @extend combines selectors sharing styles [OK]

Common Mistakes:

• Expecting duplicated style blocks
• Thinking styles copy separately
• Splitting properties between selectors

4. What is wrong with this Sass code?

.card { border: 1px solid black; }
.panel { @extend card; }

medium

A. Missing dot before card in @extend selector.

B. Cannot use @extend inside .panel.

C. Border property is invalid.

D. No styles defined in .panel.

Solution

1. Step 1: Check @extend selector syntax

   The selector to extend must include the dot for class selectors.

2. Step 2: Identify error in code

   @extend card; misses the dot, should be @extend .card;.

3. Final Answer:

   Missing dot before card in @extend selector. -> Option A

4. Quick Check:

   Class selectors need dot in @extend [OK]

Hint: Always include dot for class names in @extend [OK]

Common Mistakes:

• Omitting dot before class name
• Thinking @extend can't be used inside rules
• Confusing property errors with selector errors

5. You want to create a .warning style that shares all styles from .alert but also adds background-color: yellow;. Which Sass code correctly does this?

hard

A. .warning { @extend alert; background-color: yellow; }

B. .warning { background-color: yellow; @extend .alert(); }

C. .warning { @extend .alert; background-color: yellow; }

D. .warning { @extend .alert background-color: yellow; }

Solution

1. Step 1: Understand @extend usage with additional styles

   You can use @extend inside a selector and add other properties after it.

2. Step 2: Check each option

   .warning { @extend .alert; background-color: yellow; } correctly uses @extend .alert; then adds background-color in the same block. Others have syntax errors: parentheses after selector, missing dot before alert, or missing semicolon.

3. Final Answer:

   .warning { @extend .alert; background-color: yellow; } -> Option C

4. Quick Check:

   @extend plus extra styles in same block [OK]

Hint: Put @extend first, then add extra styles in same block [OK]

Common Mistakes:

• Adding parentheses after selector
• Omitting dot before class name in @extend
• Missing semicolon after @extend