@extend directive in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the @extend directive do in Sass?

The @extend directive lets one CSS selector inherit the styles of another selector. It helps avoid repeating the same styles.

beginner

How does @extend affect the compiled CSS output?

It combines selectors that share styles into one rule, reducing duplication and making CSS smaller and easier to maintain.

intermediate

Can @extend be used with placeholder selectors? What are placeholders?

Yes. Placeholders start with % and are not output alone in CSS. They are meant to be extended by other selectors.

intermediate

What happens if you @extend a selector inside a nested rule?

The extended styles are merged respecting the nesting, so the output CSS keeps the correct hierarchy and specificity.

advanced

Why should you be careful when using @extend with very generic selectors?

Because it can cause unexpected style merging and large combined selectors, making CSS harder to debug and maintain.

What symbol is used to define a placeholder selector in Sass?

A %

B @

C #

D $

Placeholder selectors start with % and are meant to be extended but do not output CSS on their own.

What is the main benefit of using @extend in Sass?

A To repeat styles multiple times

B To create animations

C To add JavaScript functionality

D To combine selectors and avoid style duplication

@extend helps combine selectors sharing styles, reducing repetition in the CSS output.

If you @extend a selector inside a nested rule, what happens?

A It causes a syntax error

B The styles are ignored

C The styles are merged respecting nesting

D It duplicates the styles

Sass merges extended selectors respecting nesting to keep correct CSS structure.

Which of these is a risk when overusing @extend with generic selectors?

A Unexpected style merging and complex selectors

B CSS file size increases

C JavaScript errors

D HTML validation errors

Using @extend with generic selectors can create large combined selectors that are hard to debug.

Can @extend be used to inherit styles from multiple selectors at once?

A Only with placeholders

B Yes, by listing selectors separated by commas

C No, only one selector at a time

D Only inside media queries

You can extend multiple selectors by listing them separated by commas in @extend.

Explain how the @extend directive works in Sass and why it is useful.

Think about how sharing styles can save writing the same CSS again.

Describe potential problems when using @extend with very generic selectors and how to avoid them.

Consider what happens if many selectors get combined unexpectedly.