Chained extensions in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Chained Extensions in Sass

Given the Sass code below, what will be the color of the .button element when rendered in CSS?

SASS

@mixin base-style {
  color: blue;
}

%base {
  @include base-style;
  font-weight: bold;
}

%extended {
  @extend %base;
  font-size: 1.2rem;
}

.button {
  @extend %extended;
}

A The button text color will be blue.

B The button text color will be bold.

C The button text color will be black (default).

D The button text color will be 1.2rem.

💡 Hint

Remember that @extend copies styles from placeholders, and mixins add styles inside placeholders.

The .button class extends %extended, which extends %base. The %base placeholder includes the mixin that sets color: blue;. So the button text color will be blue.

📝 Syntax

intermediate

Identify the Syntax Error in Chained Extensions

Which option contains a syntax error that will prevent Sass from compiling when chaining extensions?

SASS

%base {
  color: red;
}

%extended {
  @extend base;
  font-size: 1rem;
}

.alert {
  @extend %extended;
}

A In %extended, @extend base; is missing the percent sign before base.

B In .alert, @extend %extended; should be @include %extended; instead.

C In %base, color: red; is invalid CSS property.

D In %extended, font-size: 1rem; is missing a semicolon.

💡 Hint

Check the syntax for extending placeholders in Sass.

When extending a placeholder selector, you must include the percent sign. Writing @extend base; without % causes a syntax error.

❓ rendering

advanced

Rendered CSS from Chained Extensions

What is the rendered CSS output of the following Sass code?

SASS

%base {
  border: 1px solid black;
}

%extended {
  @extend %base;
  padding: 10px;
}

.card {
  @extend %extended;
  background: white;
}

A

.card {
  border: 1px solid black;
  background: white;
}

B

.card {
  border: 1px solid black;
  padding: 10px;
  background: white;
}

C

%base, %extended, .card {
  border: 1px solid black;
  padding: 10px;
  background: white;
}

D

.base, .extended, .card {
  border: 1px solid black;
}
.extended, .card {
  padding: 10px;
}
.card {
  background: white;
}

💡 Hint

Remember that placeholders do not appear in the final CSS, only selectors that extend them.

Placeholders like %base and %extended do not generate CSS selectors themselves. The .card class extends both, so it gets all styles combined in one block.

❓ selector

advanced

Selector Specificity with Chained Extensions

Given the Sass code below, which CSS selector will be generated for the .alert class?

SASS

%base {
  color: green;
}

%warning {
  @extend %base;
  font-weight: bold;
}

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

A

.alert {
  background-color: yellow;
}

B

%base, %warning, .alert {
  color: green;
  font-weight: bold;
  background-color: yellow;
}

C

.alert {
  color: green;
  font-weight: bold;
  background-color: yellow;
}

D

.base, .warning, .alert {
  color: green;
  font-weight: bold;
  background-color: yellow;
}

💡 Hint

Placeholders do not appear in the final CSS selectors, only the classes that extend them.

Only the .alert class appears in the CSS selector. It inherits styles from %base and %warning via chained extensions.

❓ accessibility

expert

Accessibility Impact of Chained Extensions in Sass

How can improper use of chained extensions in Sass affect accessibility of a website?

A It changes the HTML structure, breaking semantic meaning.

B It automatically adds ARIA roles to elements, improving accessibility.

C It disables screen readers from reading extended elements.

D It can cause inconsistent focus styles, making keyboard navigation difficult.

💡 Hint

Think about how CSS styles affect visible focus indicators and user interaction.

If chained extensions override or omit focus styles, keyboard users may not see which element is focused, harming accessibility.

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