Use Case of @extend in Sass
Let’s learn some use-cases for @extend directive:
Inheritance Chaining
When constructing CSS, it is difficult to avoid duplicating properties between classes. Creating complex stylesheets can be a challenge. Chaining the @extend directive is also possible in object-oriented programming languages.
In the example given below, both .Box1 and .Box2 contains the properties of color and border with the same values.
style.scss
.Box {
color: black;
border: 1px solid black;
}
.Box1 {
@extend .Box;
background-color: rgb(52, 40, 224);
}
.Box2 {
@extend .Box;
background-color: rgb(78, 93, 105);
}
The result is as follows:
style.css
.Box, .Box1, .Box2 {
color: black;
border: 1px solid black;
}
.Box1 {
background-color: #3428e0;
}
.Box2 {
background-color: #4e5d69;
}
As seen in the rewritten CSS above, Sass simplifies our markup more than CSS alone.
Multiple Inheritance
It is common for one class to contain all the styles of another when designing a page. To address this, we typically use multiple classes in the HTML. A child class does not need to contain any properties of its own.
style.scss
.Box {
color: black;
border: 1px solid black;
}
.Box1 {
background-color: rgb(52, 40, 224);
}
.Box2 {
@extend .Box;
@extend .Box1;
}
After Compilation, CSS will look like this:
style.css
.Box, .Box2 {
color: black;
border: 1px solid black;
}
.Box1, .Box2 {
background-color: #3428e0;
}
Extending Selectors
You can extend more than just class selectors. It is also possible to simplify complex selectors into a single element, like Box:hover or .Box1 and so on. You can use the @extend directive to inherit styles from any selector, no matter how complex.
style.scss
.Box {
color: black;
border: 1px solid black;
}
.Box:hover {
color: rgb(52, 40, 224);
}
.Box1 {
@extend .Box:hover;
}
After Compilation, CSS will look like this:
style.css
.Box {
color: black;
border: 1px solid black;
}
.Box:hover, .Box1 {
color: #3428e0;
}
Placeholder Selector
A % sign precedes the names of placeholder selectors. In HTML, placeholder selectors cannot be used, but they can be used as inheritance, meaning other selectors can inherit the styling by using the @extend at-rule.
style.scss
%Box {
color: black;
border: 1px solid black;
}
.Box1 {
@extend %Box;
color: rgb(52, 40, 224);
}
After Compilation, CSS will look like this:
style.css
.Box1 {
color: black;
border: 1px solid black;
}
.Box1 {
color: #3428e0;
}
We do not have the placeholder selector in the compiled CSS, but only its styling rules in the styling classes that extend it.
Frequently Asked Questions
-
What are the advantages of @extend?
Ans: Cleaner HTML Classes: In cases where you run into issues, you may not determine the root cause if so many classes are used within one element. Furthermore, HTML tags are not organized well. Our classes are structured in a cleaner way using @extend within each HTML element.
Reducing Duplication of CSS: The CSS styles we use in web development are often duplicated. The reuse of CSS source code is, therefore, beneficial. We can use @extend to reuse our CSS wherever it makes sense and is cleaner to do so.
Saving time and effort: By reusing CSS for different elements, developers can reduce the amount of time spent finding the cause of CSS issues and make their CSS structure cleaner.
-
What is SASS Private Placeholder?
Ans: Private placeholders can be defined in SASS by adding a - hyphen or underscore _ before the selector name. Placeholder selectors become private and can only be altered by styling classes within the same stylesheet.
-
When should we use @mixin and @extend?
Ans: Many of the capabilities of the @extend directive are the same as Sass mixins.
Mixins copy their rules into the styles that include them. The @extend directive allows selectors to be only included once for any given rule.
In contrast, mixins are smaller when compressed with gzip. When the style rules need to be configured using arguments, we should use SASS mixins. However, if the style rules are static (just a chunk of style), we can use SASS extends in our stylesheet.
Key-Takeaways
Using Sass, we can improve our CSS in many ways to make it easier to develop, maintain, and be more readable. Property is not copied into an inheriting selector; instead, it is combined with it. By using the @extend rule, we inherit from a property named after the property we want to inherit from.
If you are interested in learning front-end web development, check out Coding Ninjas Guided Path which contains all the content for it.
310+ registered 
