The Sass @extend Rule

What Does @extend Do?

@extend tells the compiler: "wherever the extended selector's declarations apply, also apply them to this selector." Instead of copying declarations into the extending selector, Sass groups the two selectors together into one combined rule in the output.

.message {
  padding: 1rem;
  border-radius: 6px;
}

.message-success {
  @extend .message;
  background: #dcfce7;
}

Compiles to .message, .message-success { padding: 1rem; border-radius: 6px; } plus a separate rule for .message-success's own background.

@extend Syntax

.selector {
  @extend .other-selector;
}

.selector {
  @extend %placeholder;
}

.selector {
  @extend .other-selector !optional;
}

• @extend .class; shares another class's declarations by grouping selectors together.
• @extend %placeholder; is the most common pairing, sharing a placeholder's declarations without ever outputting the placeholder alone.
• !optional suppresses the compiler error that would otherwise occur if the extended selector is never matched anywhere.
• A single selector can @extend multiple other selectors or placeholders in separate statements.

@extend Cheatsheet

Common @extend patterns and their trade-offs.

@extend vs Mixin Trade-offs

@extend produces smaller output for shared, unparameterized styles by grouping selectors instead of duplicating declarations. But it can also produce long, hard-to-read combined selectors when many unrelated rules extend the same placeholder, and it cannot accept parameters like a mixin can.

A Caveat: @extend Across Media Queries

You generally cannot @extend a selector defined inside a different media query than the extending selector; Dart Sass raises a compile error in that case, since the resulting rule wouldn't make logical sense in plain CSS.

@media (min-width: 768px) {
  %card-base { padding: 1.5rem; }
}

.card {
  // @extend %card-base; // error: cannot extend across media query boundaries
}

When to Avoid @extend

Modern Sass style guides increasingly favor mixins and placeholders used sparingly over heavy @extend chains, since long combined selector lists can be harder to debug in browser DevTools than straightforward, locally duplicated declarations from a mixin.

Common Mistakes

• Extending a selector across a media query boundary, which raises a compile error in Dart Sass.
• Chaining many unrelated @extends onto the same placeholder, producing an extremely long, hard-to-read combined selector in the compiled CSS.
• Forgetting !optional when a placeholder or selector might legitimately never be used, causing an unnecessary compile error.
• Using @extend when a mixin would actually be clearer, especially once any parameterization is needed.

Key Takeaways

• @extend groups selectors together at compile time instead of duplicating declarations.
• It's most commonly paired with placeholder selectors to avoid unused, standalone output.
• @extend cannot cross media query boundaries and cannot accept parameters.
• For anything needing parameters or variation, a mixin remains the clearer, more debuggable choice.