Sass Extend

Sass Tutorial

Sass @extend – Complete Practical Guide

The Sass @extend directive allows one selector to inherit styles from another selector.

 Think of @extend as CSS inheritance at the selector level.

1. What Is Sass @extend?

@extend tells Sass:

“This selector should behave like that selector.”

Instead of repeating the same CSS rules, Sass merges selectors during compilation.

2. Basic Syntax


 

3. Simple Example


 

Compiled CSS


 

  •  No duplication
  •  Cleaner CSS output

4. Why Use @extend?

Without @extend:

  • Duplicate styles

  • Bigger CSS files

  • Harder maintenance

With @extend:

  • DRY (Don’t Repeat Yourself)

  • Smaller compiled CSS

  • Semantic relationships

5. @extend vs Copy-Paste

Copy-Paste


 

@extend


 

6. Extending Multiple Selectors


 

7. Placeholder Selectors (%) – BEST PRACTICE

Why placeholders?

  • Never appear in compiled CSS

  • Used only for extension

  • Prevent selector bloat

Example


 

Compiled CSS

  •  Clean
  •  Efficient
  • Recommended

8. Extending with Nested Selectors


 

Sass correctly resolves nested selectors.

9. @extend and Pseudo-Classes


 

Sass merges selectors safely.

10. When NOT to Use @extend

Avoid @extend when:

  •  Styles are unrelated
  •  You need different properties
  •  You are working with utility classes
  • You want predictable selector output

In these cases → use mixins instead.

11. @extend vs Mixins

Feature@extendMixins
Reuses stylesYesYes
Duplicates CSSNoYes
Selector mergingYesNo
Accepts parametersNoYes
Best forShared semanticsDynamic styles
  • Extend = inheritance
  • Mixin = composition

12. Common Mistakes

  1. Extending real classes instead of placeholders

  2. Extending deeply nested selectors

  3. Using @extend like a mixin

  4. Causing large selector chains

  5. Extending third-party classes

13. Performance & Output Considerations

  • @extend runs at compile time

  • No runtime cost

  • Can reduce CSS size

  • Poor usage can increase selector complexity

14. Interview-Level Questions

Q: What does @extend do in Sass?
It allows one selector to inherit styles from another.

Q: Does @extend duplicate CSS?
No, it merges selectors.

Q: Best practice for @extend?
Use placeholder selectors (%).

Q: Difference between @extend and mixins?
Selector merging vs CSS duplication.

Best Practices Summary

  • Prefer %placeholders over real classes

  • Use @extend for shared base styles

  • Avoid extending deeply nested selectors

  • Use mixins for configurable styles

  • Keep selector relationships meaningful

Final Summary

  • @extend enables selector-level inheritance

  • Reduces CSS duplication

  • Best used with placeholders

  • Powerful but must be used carefully

  • Essential tool for clean Sass architecture

You may also like...