Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Selector

Sass selector-extend() Function

Posted in Sass Tutorial
Updated on Sep 30, 2024
By Mari Selvan
👁ī¸ 22 - Views
âŗ 4 mins
đŸ’Ŧ 1 Comment
Sass selector-extend() Function

Photo Credit to CodeToFun

🙋 Introduction

The selector-extend() function in Sass is a powerful feature used to extend one selector with another. This allows you to share styles across multiple selectors without duplicating code.

The selector-extend() function is particularly useful when you want to apply the styles of one selector to another or when you're working with complex stylesheets and want to keep your code DRY (Don't Repeat Yourself).

💡 Syntax

The selector-extend() function takes three arguments:

Syntax
Copied
Copy To Clipboard
selector-extend(selector, extendee, extender)

đŸ”ĸ Parameters

  • selector: The original selector to be extended.
  • extendee: The target selector whose styles will be extended.
  • extender: The selector that will inherit the styles from the extendee.

↩ī¸ Return Value

The function returns a string that represents the new selector with the extended styles applied.

📝 Example Usage

Let's explore some examples to understand how selector-extend() can be used effectively.

📜 Example 1: Basic Usage

example.scss
Copied
Copy To Clipboard
%base-button {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #3498db;
  color: white;
}

.button-primary {
  @extend %base-button;
  background-color: #2980b9;
}

.button-secondary {
  @extend %base-button;
  background-color: #95a5a6;
}

In this example, the %base-button placeholder selector is extended by both .button-primary and .button-secondary. This allows the base button styles to be shared without repeating the code.

📜 Example 2: Extending a Nested Selector

example.scss
Copied
Copy To Clipboard
.menu {
  &-item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
}

.nav-item {
  @extend .menu-item;
  color: #333;
}

Here, the .nav-item selector extends .menu-item, inheriting its styles while adding its own.

📜 Example 3: Using selector-extend() in Complex Scenarios

example.scss
Copied
Copy To Clipboard
%common-style {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

.card {
  @extend %common-style;
  padding: 20px;
  background-color: #f7f7f7;
}

.alert {
  @extend %common-style;
  padding: 15px;
  background-color: #ffdddd;
}

In this example, the %common-style placeholder selector is used to share font styles across both the .card and .alert classes, keeping the code clean and consistent.

🎉 Conclusion

The selector-extend() function in Sass is a powerful tool that helps you manage and reuse styles efficiently. By extending selectors, you can avoid code duplication and maintain a cleaner, more maintainable stylesheet. This function is especially useful in large projects where consistency and code organization are crucial.

Mastering selector-extend() can significantly improve your workflow in Sass, allowing you to create more modular and reusable styles. Experiment with different selectors and combinations to fully leverage the potential of this function in your Sass projects.

👨‍đŸ’ģ 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