@extend directive in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the @extend directive do in Sass?

Choose the best description of what the @extend directive does in Sass.

A It imports external CSS files into the current Sass file.

B It copies all styles from one selector to another, merging their rules.

C It defines a new variable that can be reused in styles.

D It creates a new mixin that can be included in other selectors.

💡 Hint

Think about how Sass helps avoid repeating the same styles in multiple places.

The @extend directive allows one selector to inherit the styles of another by merging their CSS rules. This helps avoid duplication and keeps the CSS smaller.

📝 Syntax

intermediate

Which Sass code correctly uses @extend to share styles?

Select the option that correctly uses @extend to make .button-primary share styles from .button.

A .button-primary { @extend .button; color: blue; }

B .button-primary { @extend #button; color: blue; }

C .button-primary { extend .button; color: blue; }

D .button-primary { @include extend(.button); color: blue; }

💡 Hint

Remember the exact syntax for @extend and how selectors are referenced.

The correct syntax is @extend followed by the selector to inherit from, without quotes or parentheses.

❓ rendering

advanced

What CSS output results from this Sass code using @extend?

Given this Sass code, what is the compiled CSS output?

SASS

.alert { border: 1px solid red; padding: 1rem; }
.error { @extend .alert; background: pink; }

A .error { border: 1px solid red; padding: 1rem; background: pink; }

B

.alert { border: 1px solid red; padding: 1rem; }
.error { border: 1px solid red; padding: 1rem; background: pink; }

C

.alert { border: 1px solid red; padding: 1rem; }
.error { background: pink; }

D

.alert, .error { border: 1px solid red; padding: 1rem; }
.error { background: pink; }

💡 Hint

Think about how @extend merges selectors in the output CSS.

The @extend directive merges selectors sharing the same styles into a single CSS rule. So .alert and .error share the border and padding styles in one rule, while .error adds its own background style separately.

❓ selector

advanced

Which selector will NOT be matched by @extend in this Sass code?

Given the Sass code below, which selector will NOT be extended by .card?

SASS

.box { padding: 1rem; }
.container .box { margin: 2rem; }
.card { @extend .box; }

A .box

B .card

C .container

D .container .box

💡 Hint

Remember @extend only matches selectors exactly or with nesting, not unrelated selectors.

The @extend directive matches selectors that include the target selector. It will extend .box and .container .box but not .container alone because it does not include .box.

❓ accessibility

expert

How can using @extend affect CSS accessibility and maintainability?

Which statement best explains a potential accessibility or maintainability issue caused by improper use of @extend?

A Extending selectors can create unexpected combined styles that confuse screen readers if semantic classes are mixed.

B Using @extend always improves accessibility by reducing CSS size and speeding up page load.

C The @extend directive automatically adds ARIA attributes to extended selectors.

D @extend duplicates all styles, increasing CSS file size and slowing down rendering.

💡 Hint

Think about how combining unrelated selectors might affect semantic meaning and style clarity.

Improper use of @extend can merge unrelated selectors, causing styles to apply where they shouldn't. This can confuse assistive technologies like screen readers if semantic class names lose their distinct styles.