What does the @extend directive do?
@extend in SCSS is a directive that lets one selector inherit the styles of another selector, merging them into a shared CSS block. Unlike mixins, @extend does not insert a copy of the code; it extends an existing selector, adding a new one to the same rule set.
Example
.message {
padding: 10px;
border: 1px solid;
}
.success {
@extend .message;
border-color: green;
}Compilation result
.message, .success {
padding: 10px;
border: 1px solid;
}
.success {
border-color: green;
}What matters to understand
1. @extend merges selectors instead of duplicating code
The result is a shared CSS block that both selectors are attached to. This reduces the size of the final file.
2. @extend works only with selectors
It does not insert individual properties the way a mixin does.
3. @extend can affect specificity and produce unexpected effects
If a project has complex selector combinations, @extend can merge them too broadly, so the styles end up applying where it was not planned.
Short conclusion:
@extend is a tool for inheriting styles between selectors that saves space in the final CSS, but it requires care in large projects. Many teams prefer mixins because they are more predictable and do not interfere with selector structure.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.