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

Copies all the styles of a selector into another selector

Answer

Creates a new CSS class with merged properties

Answer

Imports another file's styles

Question 2

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

Accepted Answer

@extend avoids CSS duplication by grouping selectors

Answer

@extend is faster to compile

Answer

@extend allows parameters

Answer

@extend works with media queries

Question 3

What is the main disadvantage of `@extend`?

Accepted Answer

It can generate unexpected selector combinations in complex stylesheets

Answer

It doesn't work with class selectors

Answer

It cannot be used inside media queries

Answer

It only works with placeholder selectors

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

Yes, always

Answer

Only with placeholder selectors

Answer

Only in Dart Sass

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` works in functions; `@include` does not

Answer

`@include` is newer than `@extend`

Answer

They produce identical CSS output

Question 6

What kind of selectors should you prefer to extend in Sass best practices?

Accepted Answer

Placeholder selectors (%)

Answer

Class selectors

Answer

ID selectors

Answer

Tag selectors