Inheritance with @extend in Sass

The @extend directive in Sass (Syntactically Awesome Style Sheets) allows one selector to inherit the styles of another selector. This feature is particularly useful for creating a consistent design across multiple elements while minimizing code duplication. Understanding how inheritance works with @extend can help you write cleaner and more maintainable stylesheets.

1. How Inheritance Works with @extend

When you use @extend, Sass merges the styles of the extended selector into the extending selector. This means that the extending selector will inherit all the properties defined in the extended selector, effectively creating a new combined selector in the compiled CSS.

For example, if you have a base class with common styles and you want to create variations of that class, you can use @extend to inherit those styles.

2. Basic Example of Inheritance

Let’s look at a simple example where we define a base class and extend it to create different button styles:

.button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    color: white;
}

.primary-button {
    @extend .button; /* Inherits styles from .button */
    background-color: #3498db; /* Specific style for primary button */
}

.secondary-button {
    @extend .button; /* Inherits styles from .button */
    background-color: #2ecc71; /* Specific style for secondary button */
}
    

In this example, both .primary-button and .secondary-button inherit the padding, border, and border-radius properties from the .button class. The resulting CSS will include the styles for both button types, ensuring consistency.

3. Compiled CSS Output

When you compile the above Sass code, the output CSS will look like this:

.button, .primary-button, .secondary-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    color: white;
}

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

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

As you can see, the styles from .button are included in both .primary-button and .secondary-button, demonstrating how inheritance works with @extend.

4. Inheritance with Multiple Selectors

You can also extend multiple selectors at once. For example:

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

.success {
    @extend .alert; /* Inherits styles from .alert */
    border-color: #28a745; /* Specific style for success alert */
}

.error {
    @extend .alert; /* Inherits styles from .alert */
    border-color: #dc3545; /* Specific style for error alert */
}
    

In this case, both .success and .error classes inherit the styles from the .alert class, allowing for consistent alert styling.

5. Limitations of Inheritance with @extend

While @extend is a powerful tool, there are some limitations to be aware of:

• Specificity Issues: Inheriting styles can lead to unexpected specificity issues, especially if the extended selector has a higher specificity than the extending selector.
• Output Complexity: The generated CSS can become less predictable, as @extend can create multiple selectors in the output, which may not always be desirable.
• Not Suitable for All Cases: @extend is best used for sharing styles that are logically related. It may not be appropriate for all situations, especially when styles are not closely related.

6. Conclusion

The @extend directive in Sass provides a powerful way to implement inheritance in your stylesheets. By allowing one selector to inherit the styles of another, it promotes code reuse and consistency across your styles. However, it is essential to use @extend judiciously, keeping in mind its limitations regarding specificity and output complexity. By understanding how inheritance works with @extend, you can create more maintainable and organized CSS that enhances your web design.