Tutorials

Sass @extend and Inheritance

Posted in Sass Tutorial

Updated on Nov 22, 2024

By Mari Selvan

👁️ 24 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

Sass's @extend directive is a powerful feature that facilitates inheritance and code reuse in your stylesheets. By allowing one selector to inherit the styles of another, @extend helps keep your code DRY (Don't Repeat Yourself) and makes it easier to maintain and update.

This guide will explore how to use @extend, its syntax, benefits, and common pitfalls.

💡 Syntax

The syntax of the @extend directive is quite simple. It involves using the @extend keyword followed by the selector you wish to inherit styles from.

Syntax

Copied

selector {
  @extend %placeholder;
}

🔢 Parameters

selector: The CSS rule where you want to extend styles.
%placeholder: A placeholder selector (e.g., %base-style) that contains the styles to be inherited.

📝 Example Usage

Let's look at some practical examples to illustrate how @extend can be applied effectively.

📜 Example 1: Basic Usage

example.scss

Copied

%base-style {
  font-family: Arial, sans-serif;
  color: #333;
}

h1 {
  @extend %base-style;
  font-size: 2em;
}

p {
  @extend %base-style;
  line-height: 1.5;
}

In this example, both h1 and p elements extend the styles from %base-style. This avoids duplication of common styles and ensures consistency across elements.

📜 Example 2: Extending Multiple Selectors

example.scss

Copied

%button-style {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.primary-button {
  @extend %button-style;
  background-color: blue;
  color: white;
}

.secondary-button {
  @extend %button-style;
  background-color: gray;
  color: black;
}

Here, both .primary-button and .secondary-button inherit the styles from %button-style, but with additional specific styles.

📜 Example 3: Extending Placeholder Selectors

example.scss

Copied

%error {
  color: red;
}

.field-error {
  @extend %error;
}

.notification-error {
  @extend %error;
  font-weight: bold;
}

In this example, both .field-error and .notification-error extend the %error placeholder, but .notification-error adds additional styling.

✅ Benefits of Using @extend

Reduces Code Duplication: By inheriting styles, you avoid repeating the same code, making your stylesheet more efficient and easier to manage.
Improves Maintainability: Changes to a base style only need to be made in one place, which propagates to all extending selectors.
Enhances Readability: Grouping common styles into placeholders improves the organization and readability of your stylesheet.

⚠️ Common Pitfalls

Overuse of @extend: Overusing @extend can lead to complex and unintuitive CSS rules. It may generate unwanted side effects if multiple selectors inherit styles from a common placeholder. Use @extend judiciously and consider alternatives like mixins for more control.
Specificity Issues: @extend may sometimes result in unexpected CSS specificity issues, especially when extending selectors across different levels of your stylesheet. Be cautious of how extended styles interact with other rules.
Placeholder Selectors: Remember that %placeholder selectors are not output in the final CSS unless they are extended. Ensure that placeholders are used appropriately to avoid unintended CSS bloat.

🎉 Conclusion

The @extend directive in Sass is a valuable tool for creating maintainable and efficient stylesheets by leveraging inheritance. By understanding how to use @extend effectively, you can keep your stylesheets DRY, enhance consistency, and simplify your code management.

Experiment with @extend to see how it fits into your workflow and helps achieve a cleaner and more organized stylesheet. While @extend is powerful, always balance its use with other Sass features like mixins to address more complex styling needs.