Sass Extend

Sass Tutorial

Sass Extend (@extend)

Sass Extend @extend is used to share CSS rules between selectors.
Instead of copying properties (like mixins), @extend lets one selector inherit the styles of another, producing cleaner and smaller CSS output.

 Basic Syntax

Define a Base Class

.message {
padding: 10px;
border: 1px solid #ccc;
font-size: 14px;
}

Extend It

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

Compiled CSS

.message, .success {
padding: 10px;
border: 1px solid #ccc;
font-size: 14px;
}.success {
border-color: green;
}

✔ No duplicated CSS properties

 Multiple Extensions

.error {
@extend .message;
border-color: red;
}.warning {
@extend .message;
border-color: orange;
}

 Extending Placeholder Selectors (%)

Why Placeholders?

Placeholders don’t generate CSS unless extended.

%box {
padding: 20px;
border-radius: 5px;
}.card {
@extend %box;
}.panel {
@extend %box;
}

Output

.card, .panel {
padding: 20px;
border-radius: 5px;
}

✔ Best practice for @extend

 Extending with Nesting

.button {
padding: 10px;&-primary {
@extend .button;
background: blue;
}
}

 Extend with Pseudo-Classes

.btn {
padding: 10px;
}.btn:hover {
color: white;
}.link {
@extend .btn;
}

⚠️ Be careful: selectors can become complex.

@extend vs Mixins

Feature @extend @mixin
Reusability Shares selectors Copies properties
Parameters ❌ No ✅ Yes
CSS Size Smaller Larger
Control Limited High

❌ When NOT to Use @extend

  • Across unrelated components

  • Inside media queries (can cause issues)

  • When parameters are needed

✅ Best Practices

✔ Prefer %placeholder selectors
✔ Use extend for similar components
✔ Avoid extending complex selectors
✔ Keep CSS readable

📌 Summary

  • @extend shares styles between selectors

  • Produces smaller CSS

  • Best used with placeholders %

  • Use mixins for dynamic styles

You may also like...