SASS Extends and Inheritance 2

Question 1

What CSS output does the following Sass produce: `.a { color: red; } .b { @extend .a; }`?

Accepted Answer

.a, .b { color: red; }

Answer

Sass combines the extending selector `.b` with the original `.a` using a comma, producing `.a, .b { color: red; }`.

Question 2

How does `@extend` interact with a class that has multiple rules?

Accepted Answer

All rules that include the extended selector are inherited

Answer

When you `@extend .foo`, your selector is added to every CSS rule that contains `.foo`, inheriting all of its appearances throughout the stylesheet.

Question 3

What is a 'silent' extend in Sass?

Accepted Answer

Extending a placeholder selector that produces no output unless extended

Answer

Extending a placeholder selector (`%`) is called a 'silent' extend because the placeholder produces no CSS until it is extended.

Question 4

What happens to a placeholder selector that is never extended?

Accepted Answer

It produces no CSS output at all

Answer

Unextended placeholder selectors are completely absent from the CSS output, making them zero-cost for unused style definitions.

Question 5

Can one placeholder extend another placeholder in Sass?

Accepted Answer

Yes, placeholders can extend other placeholders

Answer

Placeholders can extend other placeholders, and the chained inheritance is resolved in the compiled output for any selector that extends the outermost placeholder.

SASS Practice Test

SASS Practice Test

SASS Extends and Inheritance 2