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

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