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.