Sass @extend and Inheritance

Welcome to The Coding College, where coding becomes effortless! In this guide, we’ll explore the @extend directive in Sass, a feature designed to promote code reuse and reduce redundancy. With @extend, you can share styles between selectors, making your CSS cleaner and easier to maintain.

What Is @extend in Sass?

The @extend directive allows one selector to inherit the styles of another. Instead of copying the same rules across multiple selectors, you define them once and extend them wherever needed.

Example: Basic @extend Usage

.button {  
  padding: 10px 20px;  
  color: #fff;  
  background-color: #3498db;  
}  

.button-primary {  
  @extend .button;  
  background-color: #2ecc71;  
}  

Resulting CSS:

.button, .button-primary {  
  padding: 10px 20px;  
  color: #fff;  
  background-color: #3498db;  
}  

.button-primary {  
  background-color: #2ecc71;  
}  

Benefits of Using @extend

1. Code Reuse: Define styles once and reuse them across multiple selectors.
2. Reduced File Size: Avoid duplicating styles, resulting in smaller CSS files.
3. Consistency: Ensure a uniform design by sharing styles between components.

Use Cases for @extend

1. Extending a Base Class

Define a base class with shared styles, then extend it for specific components:

.base {  
  font-family: 'Arial', sans-serif;  
  font-size: 16px;  
  color: #333;  
}  

.header {  
  @extend .base;  
  font-size: 24px;  
}  

.footer {  
  @extend .base;  
  font-size: 14px;  
}  

Resulting CSS:

.base, .header, .footer {  
  font-family: 'Arial', sans-serif;  
  font-size: 16px;  
  color: #333;  
}  

.header {  
  font-size: 24px;  
}  

.footer {  
  font-size: 14px;  
}  

2. Extending Placeholder Selectors

Sass allows you to use placeholder selectors (denoted by %) with @extend. Placeholder selectors are never compiled into CSS but can be extended.

%button-styles {  
  padding: 10px 20px;  
  border-radius: 5px;  
  cursor: pointer;  
}  

.button-primary {  
  @extend %button-styles;  
  background-color: #3498db;  
  color: #fff;  
}  

.button-secondary {  
  @extend %button-styles;  
  background-color: #2ecc71;  
  color: #fff;  
}  

Resulting CSS:

.button-primary, .button-secondary {  
  padding: 10px 20px;  
  border-radius: 5px;  
  cursor: pointer;  
}  

.button-primary {  
  background-color: #3498db;  
  color: #fff;  
}  

.button-secondary {  
  background-color: #2ecc71;  
  color: #fff;  
}  

Key Considerations

1. Selector Grouping: When using @extend, Sass groups all selectors sharing the same styles. This can lead to overly specific or unexpected selectors in the compiled CSS.
2. Use Placeholders: Prefer placeholder selectors (%) for styles intended only for inheritance, as they won’t clutter the final CSS.
3. Avoid Overuse: Overusing @extend can make your CSS harder to debug. Mixins may be a better choice for styles with unique or variable properties.

@extend vs @mixin

Both @extend and @mixin promote code reuse but are suited to different scenarios:

Example Comparison

@extend

%button-styles {  
  padding: 10px 20px;  
  border-radius: 5px;  
}  

.button-primary {  
  @extend %button-styles;  
  background-color: #3498db;  
}  

@mixin

@mixin button-styles($bg-color) {  
  padding: 10px 20px;  
  border-radius: 5px;  
  background-color: $bg-color;  
}  

.button-primary {  
  @include button-styles(#3498db);  
}  

Best Practices

1. Use Placeholders for Scalability: Avoid extending classes directly unless necessary.
2. Combine @extend with @mixin: Use @extend for static styles and @mixin for styles requiring parameters.
3. Limit Nesting: Keep your @extend usage shallow to avoid complex selector chains.

Example: Organizing with @extend

// _placeholders.scss  
%card {  
  padding: 20px;  
  border: 1px solid #ddd;  
  border-radius: 5px;  
}  

%button {  
  padding: 10px 20px;  
  font-weight: bold;  
  border-radius: 3px;  
}  

// main.scss  
@import 'placeholders';  

.card-primary {  
  @extend %card;  
  background-color: #3498db;  
}  

.card-secondary {  
  @extend %card;  
  background-color: #2ecc71;  
}  

.button-primary {  
  @extend %button;  
  background-color: #3498db;  
  color: #fff;  
}  

.button-secondary {  
  @extend %button;  
  background-color: #e74c3c;  
  color: #fff;  
}  

Conclusion

The @extend directive in Sass simplifies your CSS by sharing styles across selectors. While it’s a great tool for inheritance, combining it with placeholders and mixins ensures you get the most out of your Sass workflow.