Sass @extend Rule
Last Updated :
15 May, 2023
The sass @extend rule can be used when it is necessary for a class to have the styles of another class, along with its own specific styles. This rule tells Sass that one selector should inherit the class from another selector.
Syntax:
@extend <selector>
Example: This example shows the use of the SASS @extend rule.
SASS
.gfg
border : 1px green
background-color : black
font-family : sans-serif
&--geeks
@extend .gfg
border-width : 4px
|
Output:
.gfg,
.gfg--geeks {
border: 1px green;
background-color: black;
font-family: sans-serif;
}
.gfg--geeks {
border-width: 4px;
}
Sass styles are the elements that match the extender as though they also match the class being extended when one class extends the other. Selectors are not just used on their own in style rules. Sass knows to extend everywhere the selector is used. This ensures that the elements are styled exactly as if they matched the extended selector.
Example: This example shows the use of the SASS @extend rule.
SASS
.gfg:hover
border : 1px green
background-color : black
font-family : sans-serif
.gfg--geeks
@extend .gfg
border-width : 4px
|
Output:
.gfg:hover,
.gfg--geeks:hover {
border: 1px green;
background-color: black;
font-family: sans-serif;
}
.gfg--geeks {
border-width: 4px;
}
Working of the rule: The @extend rule updates the style rules that contain the extended selector so that it contains the extending selector. When extending selectors, Sass does intelligent unification by never generating the selectors like #main#footer that cannot possibly match any elements. It also ensures that complex selectors are interleaved so that they work no matter which orders the HTML elements are nested in.
Intelligent unification is also done by trimming the redundant selectors as much as possible, while still ensuring that the specificity is greater than or equal to that of the extender. In short, it intelligently handles combinators, universal selectors, and pseudo-classes that contain selectors.
Example: This example shows the use of the SASS @extend rule.
css
.content nav.sidebar
@extend .gfg
p.gfg
background-color : green
color : white
.geeks .gfg
border : 1px solid black
border-radius: 4px
main.content .gfg
font-size : 2px
font-family : sans-serif
|
Output:
p.gfg {
background-color: green;
color: white;
}
.geeks .gfg,
.geeks .content nav.sidebar,
.content .geeks nav.sidebar {
border: 1px solid black;
border-radius: 4px;
}
main.content .gfg,
main.content nav.sidebar {
font-size: 2px;
font-family: sans-serif;
}
Sass’s intelligent unification can be directly accessed using the selector functions. The selector.unify() function returns a selector that matches the intersection of two selectors, while the selector.extend() function works just like @extend, but on a single selector.
Share your thoughts in the comments
Please Login to comment...