0
0
SASSmarkup~10 mins

Why extending reduces duplication in SASS - Browser Rendering Impact

Choose your learning style9 modes available
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
Test your understanding
After applying step 2, what visual style does div.alert have?
AOnly blue text and black border
BBlue text, black border, and yellow background
COnly yellow background
DNo 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 FeatureEffectVisual ResultCommon Use
@extendMerges selectors sharing stylesCombined CSS rules reduce duplicationReuse styles without repeating code
MixinCopies styles into each selectorDuplicates CSS rules for each useReusable style blocks with parameters
Placeholder selector (%)Defines styles only for extendingNo CSS output unless extendedCreate 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