Extend limitations and gotchas in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What happens when you try to extend a placeholder selector that does not exist?

Consider the following Sass code:

.button { color: blue; @extend %nonexistent; }

What will happen when you compile this Sass code?

SASS

.button { color: blue; @extend %nonexistent; }

A The compiler creates an empty selector for %nonexistent and applies styles to .button.

B The compiler ignores the @extend and compiles the .button class normally.

C The compiler throws an error because the placeholder %nonexistent does not exist.

D The compiler duplicates the .button styles without any warning or error.

💡 Hint

Extending a placeholder that is not defined causes a compilation problem.

In Sass, trying to extend a placeholder selector that does not exist causes a compilation error. This prevents silent failures and helps catch mistakes early.

📝 Syntax

intermediate

Which option correctly extends multiple selectors in Sass?

You want to extend both .btn and .link selectors in your Sass code. Which of the following is the correct syntax?

A @extend .btn; @extend .link;

B @extend .btn, .link;

C @extend (.btn, .link);

D @extend .btn .link;

💡 Hint

Sass supports comma-separated lists in @extend.

In Sass, you can extend multiple selectors at once by separating them with commas inside a single @extend. Separate @extend statements also work.

❓ rendering

advanced

What is the output CSS of this Sass code with nested @extend?

Given this Sass code:

%base { color: red; } .alert { @extend %base; font-weight: bold; } .error { @extend .alert; }

What CSS will be generated?

SASS

%base { color: red; } .alert { @extend %base; font-weight: bold; } .error { @extend .alert; }

A .alert, .error { color: red; font-weight: bold; }

B .alert { color: red; font-weight: bold; } .error { font-weight: bold; }

C .alert { color: red; font-weight: bold; } .error { color: red; }

D .alert, .error { color: red; } .alert { font-weight: bold; }

💡 Hint

Extending a selector that itself extends a placeholder merges styles.

The .alert selector extends %base, so it gets color: red. The .error selector extends .alert, so it inherits both color: red and font-weight: bold. Sass merges selectors that share extended styles.

❓ selector

advanced

Why does extending a class with a pseudo-element sometimes fail?

Consider this Sass code:

.btn::before { content: "*"; } .special { @extend .btn::before; }

What is the main reason this @extend does not work as expected?

SASS

.btn::before { content: "*"; } .special { @extend .btn::before; }

A The .special class must be nested inside .btn to extend its pseudo-element.

B Pseudo-elements cannot have content property in Sass.

C The syntax for extending pseudo-elements requires escaping the colons.

D Sass does not support extending selectors with pseudo-elements like ::before.

💡 Hint

Extending pseudo-elements is not supported in Sass.

Sass does not allow extending selectors that include pseudo-elements or pseudo-classes. This is a known limitation because pseudo-elements are not real selectors but parts of selectors.

❓ accessibility

expert

How can improper use of @extend affect accessibility in CSS?

Imagine you use @extend to share styles for focus outlines across buttons and links. What is a potential accessibility risk if @extend merges selectors incorrectly?

A Focus styles might be applied to unintended elements, confusing keyboard users.

B The CSS file size will increase, slowing down page load and hurting accessibility.

C Screen readers will ignore elements with extended styles, reducing accessibility.

D @extend automatically disables focus outlines, making keyboard navigation impossible.

💡 Hint

Merging selectors can cause styles to apply broadly beyond intended targets.

When @extend merges selectors, focus styles intended for buttons might also apply to other elements, causing confusion for keyboard users who rely on clear focus indicators. This can reduce usability and accessibility.