Sass @extend

Posted in Sass Tutorial

Updated on Sep 29, 2024

By Mari Selvan

👁️ 15 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @extend directive in Sass is a powerful feature used to share styles between selectors. It allows one selector to inherit the styles of another, promoting code reuse and reducing redundancy.

This helps keep your stylesheets cleaner and more maintainable by minimizing the amount of duplicated code.

💡 Syntax

The syntax for the @extend directive is simple. You apply it to a selector that you want to extend and specify the selector whose styles you want to inherit.

Syntax

Copied

.selector-to-extend {
  // Styles to be extended
}

.another-selector {
  @extend .selector-to-extend;
  // Additional styles
}

🔢 Parameters

.selector-to-extend: The selector whose styles will be extended.
.another-selector: The selector that inherits the styles.

↩️ Return Value

The @extend directive does not return a value. Instead, it generates CSS where the extending selector inherits the styles of the extended selector.

📝 Example Usage

Let’s explore some practical examples to understand how @extend can be used effectively.

📜 Example 1: Basic Usage

example.scss

Copied

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
}

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

In this example, the .primary-button selector inherits all styles from .button and adds additional styles, like font-weight: bold;.

📜 Example 2: Extending Multiple Selectors

example.scss

Copied

.card {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
}

.card-header {
  @extend .card;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

.card-body {
  @extend .card;
  background-color: #f9f9f9;
}

Here, both .card-header and .card-body extend .card but also have their unique styles, resulting in a shared base style with additional customizations.

📜 Example 3: Avoiding Redundancy

example.scss

Copied

.alert {
  padding: 15px;
  border-radius: 5px;
}

.alert-success {
  @extend .alert;
  background-color: #dff0d8;
  color: #3c763d;
}

.alert-error {
  @extend .alert;
  background-color: #f2dede;
  color: #a94442;
}

This example demonstrates how @extend can help manage similar styles across multiple selectors by avoiding redundancy.

🎉 Conclusion

The @extend directive in Sass is a valuable tool for creating reusable and maintainable stylesheets. By leveraging @extend, you can reduce code duplication, ensure consistency across your styles, and make your CSS more modular.

While @extend is powerful, it’s important to use it judiciously to avoid unintended side effects, such as creating overly complex CSS rules or unexpected styles. When used appropriately, @extend can streamline your workflow and enhance the organization of your styles.

Understanding and implementing @extend can greatly improve the efficiency of your CSS development, making your stylesheets cleaner and easier to manage. Experiment with different use cases and discover how @extend can fit into your Sass workflow.