Extend limitations and gotchas in SASS - Browser Rendering Trace

Render Flow - Extend limitations and gotchas

[Read @use or @import] -> [Parse base styles] -> [Parse @extend directive] -> [Find selector to extend] -> [Merge selectors] -> [Generate combined CSS rules] -> [Output final CSS]

The browser receives compiled CSS where Sass @extend merges selectors by combining their styles, but this merging happens during Sass compilation, not in the browser. The browser only sees the final CSS selectors combined.

Render Steps - 4 Steps

Code Added:Basic .button styles

Before

[ ] (empty page)

→

After

[button]
[__________]
| padding |
| rounded |
| bold   |
[__________]

The .button class adds padding, rounded corners, and bold text, so the button area visually grows with these styles.

🔧 Browser Action:Creates CSS rules for .button and applies styles to matching elements

Code Sample

Two button styles share common styles via @extend, so both .primary and .secondary get .button styles merged visually.

SASS

<div class="button primary">Click me</div>
<div class="button secondary">Cancel</div>

SASS

.button {
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: bold;
}
.primary {
  @extend .button;
  background-color: blue;
  color: white;
}
.secondary {
  @extend .button;
  background-color: gray;
  color: black;
}

Render Quiz - 3 Questions

After applying step 2, what visual change happens to the .primary button?

A .primary duplicates .button styles without merging

B .primary gets all .button styles merged plus its own colors

C .primary loses .button styles and only keeps its own colors

D .primary styles remain unchanged

Common Confusions - 3 Topics

Why does extending a selector sometimes create very long combined selectors?

Because @extend merges all selectors that match the base selector, if the base selector is complex or used in many places, the combined selector list grows very long, making CSS bigger and harder to read.

💡 Use simple base selectors or placeholders (%name) to limit selector merging complexity.

Why doesn't adding styles to the base selector after extending update all extended selectors?

Actually, it does update all extended selectors because @extend links styles at compile time. But if you add styles inside a nested block or after compilation, those won't affect extended selectors.

💡 Add all base styles before extending to ensure consistent style sharing.

Why can't I extend multiple selectors separated by commas in one @extend?

Sass @extend only accepts one selector at a time. Trying to extend multiple selectors in one @extend causes errors or unexpected behavior.

💡 Use multiple @extend lines for multiple selectors.

Property Reference

Property	Effect	Limitation	Common Use
@extend	Merges selectors to share styles	Can cause unexpected selector bloat and specificity issues	Reuse common styles without duplication
Selector merging	Combines selectors in output CSS	Extending complex selectors can create large combined selectors	Simplify CSS by sharing base styles
Placeholder selectors (%name)	Used with @extend to avoid outputting base selectors	Must be used carefully to avoid missing styles	Define reusable style blocks without extra CSS

Concept Snapshot

@extend merges selectors to share styles at compile time. Can cause large combined selectors if base is complex. Use placeholder selectors (%) to avoid extra CSS. Add base styles before extending for consistent results. Cannot extend multiple selectors in one @extend. Be cautious of specificity and selector bloat.

Practice

1. What is the main limitation of using @extend in Sass?

easy

A. It merges selectors which can cause unexpected CSS output

B. It duplicates all styles instead of reusing them

C. It only works with ID selectors

D. It cannot be used inside nested rules

Solution

1. Step 1: Understand what @extend does

   @extend reuses styles by merging selectors in the final CSS output.

2. Step 2: Identify the limitation

   Merging selectors can cause unexpected combined selectors, leading to unwanted CSS rules.

3. Final Answer:

   It merges selectors which can cause unexpected CSS output -> Option A

4. Quick Check:

   @extend merges selectors = A [OK]

Hint: Remember: @extend merges selectors, not duplicates styles [OK]

Common Mistakes:

• Thinking @extend duplicates styles
• Believing @extend only works with IDs
• Assuming @extend cannot be nested

2. Which of the following is the correct syntax to extend a placeholder selector %button-base inside a class .primary-button?

easy

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

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

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

D. .primary-button { @extend #button-base; }

Solution

1. Step 1: Recall placeholder selector syntax

   Placeholder selectors start with % and must be referenced exactly with @extend %name.

2. Step 2: Check each option

   Only .primary-button { @extend %button-base; } uses @extend %button-base correctly.

3. Final Answer:

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

4. Quick Check:

   Use @extend %placeholder syntax = C [OK]

Hint: Always prefix placeholder selectors with % when extending [OK]

Common Mistakes:

• Omitting the % in the extend statement
• Using wrong keywords like 'extend' without @
• Confusing ID (#) with placeholder (%) selectors

3. Given the Sass code:

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

What will be the compiled CSS output?

medium

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

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

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

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

Solution

1. Step 1: Understand @extend merges selectors

   The .error selector extends .alert, so both selectors share the color: red; style.

2. Step 2: Check the output structure

   The merged selector .alert, .error has color: red;, and .error has its own font-weight: bold;.

3. Final Answer:

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

4. Quick Check:

   Selectors merged, styles combined = D [OK]

Hint: Extended selectors share styles in a combined selector list [OK]

Common Mistakes:

• Expecting duplicated styles instead of merged selectors
• Thinking extended styles appear only inside the extending selector
• Ignoring that @extend merges selectors

4. Consider this Sass code:

.btn { color: blue; }
.special-btn { @extend .btn; background: yellow; }
.btn-primary { @extend .btn; }

Why might the compiled CSS include unexpected selectors combined with .btn-primary?

medium

A. Because @extend duplicates styles instead of merging

B. Because @extend only works with placeholder selectors

C. Because @extend merges all selectors that extend .btn into one group

D. Because @extend cannot be used with classes

Solution

1. Step 1: Understand how @extend merges selectors

   All selectors extending .btn are merged into one combined selector group in the output CSS.

2. Step 2: Identify why unexpected combinations happen

   Since both .special-btn and .btn-primary extend .btn, their selectors get merged, causing combined selectors.

3. Final Answer:

   Because @extend merges all selectors that extend .btn into one group -> Option C

4. Quick Check:

   @extend merges selectors = B [OK]

Hint: Multiple extends on one selector merge all selectors together [OK]

Common Mistakes:

• Thinking @extend duplicates styles
• Believing @extend only works with placeholders
• Assuming @extend cannot be used with classes

5. You want to reuse styles but avoid unwanted CSS output from @extend. Which approach is best?

hard

A. Use @extend inside media queries only

B. Use @extend on regular classes only

C. Duplicate styles manually instead of using @extend

D. Use placeholder selectors (e.g., %base-style) and extend them

Solution

1. Step 1: Understand placeholder selectors

   Placeholder selectors start with % and do not output CSS unless extended.

2. Step 2: Why use placeholders with @extend

   Extending placeholders avoids unwanted CSS output because placeholders themselves don't generate CSS.

3. Step 3: Evaluate other options

   Extending regular classes merges selectors and outputs all styles, duplicating styles is inefficient, and limiting @extend to media queries doesn't solve unwanted output.

4. Final Answer:

   Use placeholder selectors (e.g., %base-style) and extend them -> Option D

5. Quick Check:

   Placeholders prevent unwanted CSS output = A [OK]

Hint: Use %placeholders with @extend to avoid extra CSS [OK]

Common Mistakes:

• Extending regular classes causing large CSS output
• Copy-pasting styles instead of reusing
• Misusing @extend inside media queries