SASS Extends and Inheritance 1 — Questions and Answers
Question 1: What does the `@extend` directive do in Sass?
- Copies all the styles of a selector into another selector
- Shares styles by adding the extending selector to the extended selector's rule (Correct answer)
- Creates a new CSS class with merged properties
- Imports another file's styles
Correct answer: Shares styles by adding the extending selector to the extended selector's rule
`@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?
- @extend is faster to compile
- @extend avoids CSS duplication by grouping selectors (Correct answer)
- @extend allows parameters
- @extend works with media queries
Correct answer: @extend avoids CSS duplication by grouping selectors
`@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`?
- It doesn't work with class selectors
- It can generate unexpected selector combinations in complex stylesheets (Correct answer)
- It cannot be used inside media queries
- It only works with placeholder selectors
Correct answer: It can generate unexpected selector combinations in complex stylesheets
`@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?
- Yes, always
- Only with placeholder selectors
- No, it can only extend selectors from the same media context (Correct answer)
- Only in Dart Sass
Correct answer: No, it can only extend selectors from the same media context
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?
- `@extend` outputs grouped selectors; `@include` duplicates declarations at each use site (Correct answer)
- `@extend` works in functions; `@include` does not
- `@include` is newer than `@extend`
- They produce identical CSS output
Correct answer: `@extend` outputs grouped selectors; `@include` duplicates declarations at each use site
`@extend` groups selectors for shared styles (no duplication), while `@include` copies the mixin's styles into every use site, potentially duplicating declarations.
Question 6: What kind of selectors should you prefer to extend in Sass best practices?
- Class selectors
- ID selectors
- Placeholder selectors (%) (Correct answer)
- Tag selectors
Correct answer: Placeholder selectors (%)
Best practice recommends extending placeholder selectors (`%`) because they don't produce their own CSS, keeping the output clean.
SASS Extends and Inheritance 1
What does the `@extend` directive do in Sass?