SASS Extends and Inheritance 2 — Questions and Answers
Question 1: What CSS output does the following Sass produce: `.a { color: red; } .b { @extend .a; }`?
- .a { color: red; } .b { color: red; }
- .a, .b { color: red; } (Correct answer)
- .b .a { color: red; }
- .b { @include .a; }
Correct answer: .a, .b { color: red; }
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?
- Only the last rule is inherited
- All rules that include the extended selector are inherited (Correct answer)
- Only direct property declarations are inherited
- Only media query rules are inherited
Correct answer: All rules that include the extended selector are inherited
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?
- An extend with `!optional` to suppress errors
- Extending a placeholder selector that produces no output unless extended (Correct answer)
- An extend wrapped in a comment
- An extend inside a mixin
Correct answer: Extending a placeholder selector that produces no output unless extended
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?
- It outputs an empty rule
- It produces no CSS output at all (Correct answer)
- It causes a compile warning
- It is treated as a comment
Correct answer: It produces no CSS output at all
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?
- No, placeholders cannot extend each other
- Yes, placeholders can extend other placeholders (Correct answer)
- Only if they are in the same file
- Only if they are in the same mixin
Correct answer: Yes, placeholders can extend other placeholders
Placeholders can extend other placeholders, and the chained inheritance is resolved in the compiled output for any selector that extends the outermost placeholder.
Question 6: Why might `@extend` cause issues with specificity in CSS?
- It always adds `!important` to extended properties
- It generates unexpected combined selectors that may increase specificity (Correct answer)
- It reduces specificity to zero
- It removes the class from HTML elements
Correct answer: It generates unexpected combined selectors that may increase specificity
Complex selector combinations generated by `@extend` can create higher specificity than intended, potentially overriding other styles in unexpected ways.
SASS Extends and Inheritance 2
What CSS output does the following Sass produce: `.a { color: red; } .b { @extend .a; }`?