Sass @extend Rule

Definition and Usage

The Sass @extend rule is written @extend <selector>;. It tells Sass that one selector should inherit the styles of another.

Unlike mixins, which copy styles into the current rule, @extend updates style rules that contain the extended selector so they also include the extending selector. Write class="error--serious" in HTML and Sass styles it as though it also had class="error". Prefer mixins when you need arguments or non-semantic style chunks.

Syntax

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

Compiled CSS shares the base rule between .error and .error--serious, then adds the modifier-only declaration separately.

Placeholders & Options

Core @extend shapes:

Related Rules

Compare with @mixin / @include for configurable reuse. Extension scope is clearer with @use than legacy @import. Nesting often uses parent selectors (&). Hard API fails use @error.

SCSS Examples

Each example uses @extend at compile time. Open View Compiled CSS for verified output.

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

.error:hover {
  background-color: #fee;
}

.error--serious {
  @extend .error;
  border-width: 3px;
}

.error:hover, .error--serious:hover {
  background-color: #fee;
}

.error--serious {
  border-width: 3px;
}

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

.warning, .success, .message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.warning {
  border-color: yellow;
}

.content nav.sidebar {
  @extend .info;
}

// Not extended: `p` is incompatible with `nav`.
p.info {
  background-color: #dee9fc;
}

.guide .info {
  border: 1px solid rgba(#000, 0.8);
  border-radius: 2px;
}

main.content .info {
  font-size: 0.8em;
}

p.info {
  background-color: #dee9fc;
}

.guide .info, .guide .content nav.sidebar, .content .guide nav.sidebar {
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 2px;
}

main.content .info, main.content nav.sidebar {
  font-size: 0.8em;
}

%btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

.primary {
  @extend %btn;
  background: #036;
  color: #fff;
}

.ghost {
  @extend %btn !optional;
  border: 1px solid #036;
}

.missing-extender {
  @extend %does-not-exist !optional;
  opacity: 0.8;
}

.ghost, .primary {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

.primary {
  background: #036;
  color: #fff;
}

.ghost {
  border: 1px solid #036;
}

.missing-extender {
  opacity: 0.8;
}

Sass Support

@extend is a core Dart Sass at-rule. Prefer Dart Sass for modern rules (simple-selector-only extends, @use scope).

Prefer Dart Sass for new projects. SCSS and indented syntax both support @extend.

Key Takeaways

Compile Notes

@extend never reaches the browser. Conceptual flow:

1. Compile nesting and the rest of the stylesheet
2. Collect @extend relationships
3. Unify selectors (skip impossibles, interleave safely)
4. Rewrite rules that contain the extended selector
5. Emit CSS — placeholders without extenders are dropped