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.

Practice

1. What does chaining @extend in Sass allow you to do?

easy

A. Create new CSS properties automatically

B. Make one selector inherit styles from another that already extends a base style

C. Compile Sass into JavaScript

D. Add inline styles directly in HTML

Solution

1. Step 1: Understand @extend basics

   @extend lets one selector reuse styles from another selector or placeholder.

2. Step 2: Recognize chaining effect

   Chaining means a selector extends another selector that itself extends a base style, passing styles along.

3. Final Answer:

   Make one selector inherit styles from another that already extends a base style -> Option B

4. Quick Check:

   Chained @extend = inherit styles step-by-step [OK]

Hint: Think of style inheritance passing through selectors [OK]

Common Mistakes:

• Confusing @extend with creating new CSS properties
• Thinking @extend compiles to JavaScript
• Believing @extend adds inline HTML styles

2. Which of the following is the correct syntax to chain extensions in Sass?

easy

A. .button {@extend base;}
.primary {@extend button;}

B. .button {extend %base;}
.primary {extend .button;}

C. .button {@extend %base;}
.primary {@extend .button;}

D. .button {@extends %base;}
.primary {@extends .button;}

Solution

1. Step 1: Identify correct @extend syntax

   The correct syntax uses @extend keyword with a percent sign for placeholders and dot for classes.

2. Step 2: Check chaining format

   Chaining means one selector extends a placeholder, another extends that selector, both using @extend.

3. Final Answer:

   .button {@extend %base;} .primary {@extend .button;} -> Option C

4. Quick Check:

   Correct @extend syntax uses @extend keyword and proper selector symbols [OK]

Hint: Remember to use @extend with % for placeholders and . for classes [OK]

Common Mistakes:

• Omitting the @ symbol before extend
• Using 'extends' instead of 'extend'
• Missing % for placeholders or . for classes

3. Given the Sass code:

%base { color: blue; }
.button {@extend %base; font-weight: bold;}
.primary {@extend .button; background: yellow; }

What CSS will be generated for .primary?

medium

A. .primary { color: blue; font-weight: bold; background: yellow; }

B. .primary { font-weight: bold; background: yellow; }

C. .primary { color: blue; background: yellow; }

D. .primary { background: yellow; }

Solution

1. Step 1: Trace @extend chain

   .button extends %base, so it gets color: blue;. .primary extends .button, so it inherits both color: blue; and font-weight: bold;.

2. Step 2: Combine styles for .primary

   .primary adds background: yellow; to inherited styles, so final CSS includes all three properties.

3. Final Answer:

   .primary { color: blue; font-weight: bold; background: yellow; } -> Option A

4. Quick Check:

   Chained extensions combine all inherited styles [OK]

Hint: Follow the chain from placeholder to final selector [OK]

Common Mistakes:

• Ignoring inherited styles from extended selectors
• Only applying direct styles of .primary
• Confusing placeholders with classes in output

4. What is wrong with this Sass code?

%base { color: red; }
.button { @extend %base }
.primary { @extend .button; }

medium

A. Cannot chain extensions in Sass

B. Cannot extend a placeholder with @extend

C. Class selectors cannot extend placeholders

D. Missing semicolon after @extend %base

Solution

1. Step 1: Check @extend syntax

   Every @extend statement must end with a semicolon. The line @extend %base is missing it.

2. Step 2: Verify chaining and placeholders

   Extending placeholders and chaining extensions are valid in Sass, so no error there.

3. Final Answer:

   Missing semicolon after @extend %base -> Option D

4. Quick Check:

   Always end @extend with semicolon [OK]

Hint: Check for missing semicolons after @extend [OK]

Common Mistakes:

• Thinking chaining extensions is invalid
• Believing placeholders can't be extended
• Forgetting semicolons after statements

5. You want to create a base button style and two variants: .primary and .secondary. Using chained extensions, which Sass code correctly shares the base styles and adds variant colors?

hard

A. %button-base { padding: 1rem; border-radius: 0.5rem; }
.button {@extend %button-base;}
.primary {@extend .button; background: blue;}
.secondary {@extend .button; background: gray;}

B. .button-base { padding: 1rem; border-radius: 0.5rem; }
.primary {@extend .button-base; background: blue;}
.secondary {@extend .button-base; background: gray;}

C. .button-base { padding: 1rem; border-radius: 0.5rem; }
.button {@extend .button-base;}
.primary {@extend .button; background: blue;}
.secondary {@extend .button; background: gray;}

D. %button-base { padding: 1rem; border-radius: 0.5rem; }
.primary {@extend %button-base; background: blue;}
.secondary {@extend %button-base; background: gray;}

Solution

1. Step 1: Use placeholder for base styles

   Base styles should be in a placeholder (%button-base) to avoid generating extra CSS.

2. Step 2: Chain extensions for variants

   .button extends %button-base, then .primary and .secondary extend .button, inheriting base styles and adding colors.

3. Final Answer:

   %button-base { padding: 1rem; border-radius: 0.5rem; } .button {@extend %button-base;} .primary {@extend .button; background: blue;} .secondary {@extend .button; background: gray;} -> Option A

4. Quick Check:

   Use placeholders and chain extensions for clean, reusable styles [OK]

Hint: Put base styles in %placeholder, chain extensions for variants [OK]

Common Mistakes:

• Using class selectors instead of placeholders for base styles
• Not chaining extensions, repeating base styles
• Extending classes that don't extend placeholders