Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass @extend and Inheritance

Posted in Sass Tutorial
Updated on Aug 28, 2024
By Mari Selvan
👁️ 13 - Views
⏳ 4 mins
💬 1 Comment
Sass @extend and Inheritance

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
Copy To Clipboard
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
Copy To Clipboard
%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
Copy To Clipboard
%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
Copy To Clipboard
%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

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

⚠️ Common Pitfalls

  1. 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.
  2. 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.
  3. 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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy