Chained extensions in SASS - Browser Rendering Trace

Render Flow - Chained extensions

Read base selector

↓

Create base styles

↓

Read first @extend

↓

Merge base styles into first selector

↓

Read second @extend

↓

Merge first selector styles into second selector

↓

Generate combined CSS rules

Sass processes chained extensions by reading the base styles, then merging them step-by-step into selectors that extend each other, producing combined CSS rules that share styles.

Render Steps - 3 Steps

Code Added:.button { padding: 1rem; background-color: gray; color: white; }

Before

[ ]

[ ]

[ ]

→

After

[ Button ]
  padding inside
  gray background
  white text

[ ]

[ ]

The base .button styles create a visible gray button with padding and white text.

🔧 Browser Action:Creates CSS rule for .button and paints the styled box.

Code Sample

Three buttons where .primary-button inherits .button styles, and .special-button inherits both .button and .primary-button styles through chained extensions.

SASS

<div class="button">Button</div>
<div class="primary-button">Primary Button</div>
<div class="special-button">Special Button</div>

SASS

.button {
  padding: 1rem;
  background-color: gray;
  color: white;
}
.primary-button {
  @extend .button;
  background-color: blue;
}
.special-button {
  @extend .primary-button;
  font-weight: bold;
}

Render Quiz - 3 Questions

After applying step 2, what background color does .primary-button have?

A White

B Gray

C Blue

D Transparent

Common Confusions - 2 Topics

Why does .special-button get styles from both .button and .primary-button?

Because .special-button extends .primary-button, which itself extends .button, the styles chain together so .special-button inherits all styles from both selectors (see render_step 3).

💡 Think of chained extensions like a family tree where children inherit traits from parents and grandparents.

What happens if I change a style in .button after extending it?

All selectors that extend .button will get the updated styles because @extend copies styles at compile time, so changes in base affect all chained extensions.

💡 Changing base styles updates all extended selectors visually.

Property Reference

Property	Value Applied	Effect in Chained Extensions	Common Use
@extend	Selector	Copies styles from the extended selector into the current one	Reuse styles without duplication
background-color	color value	Overrides inherited background color in chain	Customize appearance
font-weight	bold/normal	Adds or overrides font weight after extension	Emphasize text
padding	length	Inherited from base selector to maintain spacing	Consistent layout

Concept Snapshot

Chained extensions in Sass let selectors inherit styles step-by-step. @extend copies styles from one selector to another. Styles from base selectors cascade through the chain. Overrides like background-color or font-weight customize each level. This avoids repeating CSS and keeps styles consistent.