Chained extensions in SASS

Introduction

Chained extensions let you reuse styles from one selector to another in a chain. This helps keep your CSS neat and avoids repeating code.

You want multiple selectors to share the same styles without copying them.

You have a base style and want to build on it step-by-step for different elements.

You want to keep your CSS smaller and easier to maintain.

You want to change styles in one place and have it affect many selectors.

You want to organize styles in a clear, connected way.

Syntax

SASS

%base-style { property: value; }
.selector1 { @extend %base-style; }
.selector2 { @extend .selector1; }

Use @extend to inherit styles from another selector or placeholder.

Chained extensions mean one selector extends another that already extends a base style.

Examples

Here, .btn-primary extends the base button style. Then .btn-special extends .btn-primary, so it gets all styles from both.

SASS

%button-base {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: blue;
  color: white;
}

.btn-primary {
  @extend %button-base;
  font-weight: bold;
}

.btn-special {
  @extend .btn-primary;
  background-color: green;
}

This example shows text styles chained from a base placeholder to title, then subtitle.

SASS

%text-base {
  font-family: Arial, sans-serif;
  font-size: 1rem;
}

.title {
  @extend %text-base;
  font-weight: bold;
}

.subtitle {
  @extend .title;
  font-style: italic;
}

Sample Program

This Sass code defines a base box style with padding, border, and background color. Then .box-primary extends it and adds bold text. .box-alert and .box-info extend .box-primary but change background colors. This shows chained extensions in action.

In HTML, three boxes will show with shared padding and border, but different background colors and bold text.

SASS

@use 'sass:color';

%base-box {
  padding: 1rem;
  border: 2px solid black;
  border-radius: 0.5rem;
  background-color: color.scale(blue, $lightness: 20%);
  color: white;
}

.box-primary {
  @extend %base-box;
  font-weight: bold;
}

.box-alert {
  @extend .box-primary;
  background-color: color.scale(red, $lightness: 30%);
}

.box-info {
  @extend .box-primary;
  background-color: color.scale(green, $lightness: 30%);
}

/* HTML to test styles */

/*
<div class="box-primary">Primary Box</div>
<div class="box-alert">Alert Box</div>
<div class="box-info">Info Box</div>
*/

Important Notes

Chained extensions help avoid repeating styles but be careful not to create very long chains, which can be hard to follow.

Use placeholders (starting with %) for base styles to avoid generating extra CSS selectors.

Check the compiled CSS in your browser DevTools to see how extensions combine selectors.

Summary

Chained extensions let one selector inherit styles from another that already extends a base style.

This keeps CSS clean and easy to update.

Use @extend with placeholders or selectors to share styles step-by-step.