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.