@extend directive in SASS - Browser Rendering Trace

Render Flow - @extend directive

[Read SASS file] -> [Parse selectors and rules] -> [Find @extend directives] -> [Merge selectors with extended ones] -> [Generate combined CSS rules] -> [Output final CSS] -> [Browser renders combined styles]

The SASS compiler reads the source, finds @extend directives, merges selectors to avoid repetition, outputs combined CSS, which the browser then renders.

Render Steps - 4 Steps

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

Before

[ ]

[ ]

→

After

[button primary]
[button secondary]

Two div elements appear with no styles, so they look like plain boxes with text.

🔧 Browser Action:Creates DOM nodes for divs with classes

Code Sample

Two divs styled as buttons share common styles from .button using @extend, each with different background colors.

SASS

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

SASS

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

Render Quiz - 3 Questions

After step 3, what visual change do you see on the first div?

A It has padding, rounded corners, bold white text, and a blue background

B It has only padding and bold text, no background color

C It looks like plain text with no styles

D It has a gray background instead of blue

Common Confusions - 3 Topics

Why do multiple selectors appear combined in the final CSS after using @extend?

Because @extend merges selectors that share the same styles to avoid repeating CSS rules, so selectors are grouped together in the output.

💡 Think of @extend like grouping friends wearing the same outfit to save space.

Does @extend copy styles or just link selectors?

@extend does not duplicate styles but merges selectors so they share the same CSS rule, reducing code size and keeping styles consistent.

💡 It’s like sharing one recipe card instead of writing it twice.

What happens if I extend a selector that doesn’t exist?

The compiler will throw an error because it cannot find the selector to extend, so no styles get merged or applied.

💡 You must have the original style defined before extending it.

Property Reference

Property	Value/Usage	Effect	Common Use
@extend	Selector	Copies styles from the selector to current selector, merges CSS rules	Avoids repeating common styles
padding	length values	Adds space inside element border	Button spacing
border-radius	length or %	Rounds corners of element	Soft button edges
background-color	color value	Sets background color	Button color variations
font-weight	normal/bold/number	Sets text thickness	Emphasize button text
color	color value	Sets text color	Text visibility

Concept Snapshot

@extend copies styles by merging selectors in the output CSS. It avoids repeating common styles. Use it to share styles like padding, font, colors. Extending merges selectors, not duplicates rules. Original selector must exist before extending. Helps keep CSS DRY and clean.