Chained extensions in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a chained extension in Sass?

A chained extension in Sass is when one selector extends another, which itself extends a third selector, creating a chain of shared styles.

beginner

How do you write a simple extension in Sass?

Use @extend followed by the selector you want to inherit styles from, like .button { @extend .base; }.

intermediate

What happens when you chain extensions in Sass?

Sass combines all selectors in the chain so they share the same styles, reducing repeated CSS and keeping code DRY (Don't Repeat Yourself).

advanced

Can chained extensions cause unexpected CSS selectors? Why?

Yes, because Sass merges selectors from all extended classes, sometimes creating complex combined selectors that might affect styling unexpectedly.

intermediate

Why is it important to use chained extensions carefully?

Because overusing or chaining many extensions can create large, complicated CSS selectors that are hard to maintain and may slow down page rendering.

What does @extend do in Sass?

A Defines a new variable

B Imports external CSS files

C Copies styles from one selector to another

D Creates a new mixin

@extend copies styles from the specified selector to the current one, sharing CSS rules.

If .btn extends .base and .primary extends .btn, what is this called?

A Mixin inclusion

B Chained extension

C Variable inheritance

D Selector nesting

This is a chained extension because .primary extends .btn, which extends .base.

What is a risk of chaining many extensions in Sass?

A Creating very long CSS selectors

B Losing variable values

C Breaking JavaScript code

D Disabling responsive design

Chaining many extensions can create long combined selectors that are hard to read and maintain.

Which Sass feature is best for sharing styles without creating chained selectors?

A Mixins

B Variables

C Functions

D Placeholders

Mixins allow style reuse without merging selectors, avoiding chained extension complexity.

How does Sass handle selectors when using chained extensions?

A It converts selectors to IDs

B It duplicates styles for each selector

C It ignores the first selector

D It merges all selectors into combined selectors

Sass merges selectors from all extended classes to share styles efficiently.

Explain what chained extensions are in Sass and how they affect the generated CSS.

Think about how one selector extending another creates a chain.

Describe potential problems when using many chained extensions and how to avoid them.

Consider what happens to CSS selectors as chains grow longer.

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