Suggest an editImprove this articleRefine the answer for “What does the @extend directive do?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`@extend` in SCSS** is a directive that lets one selector inherit the styles of another selector, merging them into a shared CSS block. **Key point:** unlike mixins, `@extend` does not insert a copy of the code; it extends an existing selector by adding a new one to the same rule set.Shown above the full answer for quick recall.Answer (EN)Image`@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 ```scss .message { padding: 10px; border: 1px solid; } .success { @extend .message; border-color: green; } ``` ### Compilation result ```css .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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.