SASS Extends and Inheritance

Question 1

What does the `@extend` directive do in Sass?

Accepted Answer

Shares styles by adding the extending selector to the extended selector's rule

Answer

`@extend` adds the extending selector to the existing CSS rule, so both selectors share the same styles without duplicating declarations.

Question 2

What is the main advantage of using `@extend` over a mixin?

Accepted Answer

@extend avoids CSS duplication by grouping selectors

Answer

`@extend` groups selectors together in the CSS output, avoiding the repetition of property declarations that a mixin would produce.

Question 3

What is the main disadvantage of `@extend`?

Accepted Answer

It can generate unexpected selector combinations in complex stylesheets

Answer

`@extend` propagates across all instances of the extended selector, which can create surprising and unintended selector combinations in large stylesheets.

Question 4

Can `@extend` be used inside a `@media` block in Sass?

Accepted Answer

No, it can only extend selectors from the same media context

Answer

Sass restricts `@extend` inside `@media` so it can only extend selectors that appear within the same media block, preventing cross-context extension.

Question 5

What is the difference between `@extend` and `@include` in practice?

Accepted Answer

`@extend` outputs grouped selectors; `@include` duplicates declarations at each use site

Answer

`@extend` groups selectors for shared styles (no duplication), while `@include` copies the mixin's styles into every use site, potentially duplicating declarations.

SASS Practice Test

SASS Practice Test

SASS Extends and Inheritance