Why extending reduces duplication in SASS - Browser Rendering Impact

Render Flow - Why extending reduces duplication

Read SASS file

↓

Parse @extend directive

↓

Find selector to extend

↓

Merge selectors in CSS output

↓

Generate combined CSS rules

↓

Output CSS with shared styles

The SASS compiler reads the @extend directive, finds the selector to extend, merges selectors sharing styles, and outputs combined CSS to reduce repeated code.

Render Steps - 3 Steps

Code Added:div.box { color: blue; border: 1px solid black; }

Before

[No styled boxes]

→

After

[div.box]
+-------------------+
| color: blue       |
| border: 1px solid |
+-------------------+

The div.box element gets blue text and a black border, visually distinct as a styled box.

🔧 Browser Action:Creates CSS rule for div.box and applies styles

Code Sample

Two selectors share the same color and border styles without repeating them, thanks to @extend merging their CSS rules.

SASS

div.box {
  color: blue;
  border: 1px solid black;
}

div.alert {
  @extend div.box;
  background: yellow;
}

SASS

div.box, div.alert {
  color: blue;
  border: 1px solid black;
}
div.alert {
  background: yellow;
}

Render Quiz - 3 Questions

After applying step 2, what visual style does div.alert have?

A Only blue text and black border

B Blue text, black border, and yellow background

C Only yellow background

D No styles applied

Common Confusions - 2 Topics

Why does @extend merge selectors instead of copying styles?

Because @extend tells SASS to combine selectors in the CSS output, so shared styles appear once, reducing duplication (see render_step 3).

💡 Think of @extend as grouping friends wearing the same outfit instead of each buying their own.

Why doesn't @extend work with selectors that don't exist yet?

SASS throws an error because it can't find the selector to extend (related to render_flow step 'Find selector to extend').

💡 Ensure the selector to extend is defined somewhere in your SASS file.

Property Reference

SASS Feature	Effect	Visual Result	Common Use
@extend	Merges selectors sharing styles	Combined CSS rules reduce duplication	Reuse styles without repeating code
Mixin	Copies styles into each selector	Duplicates CSS rules for each use	Reusable style blocks with parameters
Placeholder selector (%)	Defines styles only for extending	No CSS output unless extended	Create base styles to extend

Concept Snapshot

@extend merges selectors to share styles in CSS output Reduces duplication by combining rules Requires the selector to exist before extending Different from mixins which copy styles Use placeholders (%) for base styles without output