@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.

Practice

1. What does the @extend directive do in Sass?

easy

A. It defines a variable.

B. It creates a new CSS property.

C. It imports external CSS files.

D. It allows one selector to reuse styles from another selector.

Solution

1. Step 1: Understand the purpose of @extend

   The @extend directive is used to share styles between selectors in Sass.

2. Step 2: Identify what @extend does

   It copies the styles of one selector into another, reducing repetition.

3. Final Answer:

   It allows one selector to reuse styles from another selector. -> Option D

4. Quick Check:

   @extend = reuse styles [OK]

Hint: Remember: @extend shares styles between selectors [OK]

Common Mistakes:

• Thinking @extend creates new properties
• Confusing @extend with imports
• Using @extend to define variables

2. Which of the following is the correct syntax to extend styles from .button to .submit in Sass?

easy

A. .submit { @extend .button; }

B. .submit { extend(@button); }

C. .submit { @extend .button(); }

D. .submit { @extend '#button'; }

Solution

1. Step 1: Recall correct @extend syntax

   The correct syntax is @extend followed by the selector name without quotes or parentheses.

2. Step 2: Check each option

   .submit { @extend .button; } uses @extend .button; which is correct. Others use wrong syntax like parentheses or quotes.

3. Final Answer:

   .submit { @extend .button; } -> Option A

4. Quick Check:

   Correct syntax = @extend .selector; [OK]

Hint: Use @extend followed by selector without quotes or parentheses [OK]

Common Mistakes:

• Adding parentheses after selector
• Using quotes around selector
• Using wrong function-like syntax

3. Given this Sass code:

.alert { color: red; font-weight: bold; }
.error { @extend .alert; }

What CSS will be generated?

medium

A. .alert { color: red; font-weight: bold; } .error { color: red; font-weight: bold; }

B. .alert, .error { color: red; font-weight: bold; }

C. .error { color: red; font-weight: bold; }

D. .alert { color: red; } .error { font-weight: bold; }

Solution

1. Step 1: Understand @extend output

   @extend merges selectors so they share the same style block.

2. Step 2: Apply to given code

   Both .alert and .error share the same styles in one combined selector.

3. Final Answer:

   .alert, .error { color: red; font-weight: bold; } -> Option B

4. Quick Check:

   Selectors combined with @extend [OK]

Hint: Remember: @extend combines selectors sharing styles [OK]

Common Mistakes:

• Expecting duplicated style blocks
• Thinking styles copy separately
• Splitting properties between selectors

4. What is wrong with this Sass code?

.card { border: 1px solid black; }
.panel { @extend card; }

medium

A. Missing dot before card in @extend selector.

B. Cannot use @extend inside .panel.

C. Border property is invalid.

D. No styles defined in .panel.

Solution

1. Step 1: Check @extend selector syntax

   The selector to extend must include the dot for class selectors.

2. Step 2: Identify error in code

   @extend card; misses the dot, should be @extend .card;.

3. Final Answer:

   Missing dot before card in @extend selector. -> Option A

4. Quick Check:

   Class selectors need dot in @extend [OK]

Hint: Always include dot for class names in @extend [OK]

Common Mistakes:

• Omitting dot before class name
• Thinking @extend can't be used inside rules
• Confusing property errors with selector errors

5. You want to create a .warning style that shares all styles from .alert but also adds background-color: yellow;. Which Sass code correctly does this?

hard

A. .warning { @extend alert; background-color: yellow; }

B. .warning { background-color: yellow; @extend .alert(); }

C. .warning { @extend .alert; background-color: yellow; }

D. .warning { @extend .alert background-color: yellow; }

Solution

1. Step 1: Understand @extend usage with additional styles

   You can use @extend inside a selector and add other properties after it.

2. Step 2: Check each option

   .warning { @extend .alert; background-color: yellow; } correctly uses @extend .alert; then adds background-color in the same block. Others have syntax errors: parentheses after selector, missing dot before alert, or missing semicolon.

3. Final Answer:

   .warning { @extend .alert; background-color: yellow; } -> Option C

4. Quick Check:

   @extend plus extra styles in same block [OK]

Hint: Put @extend first, then add extra styles in same block [OK]

Common Mistakes:

• Adding parentheses after selector
• Omitting dot before class name in @extend
• Missing semicolon after @extend