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 /* This won't be extended, because `p` is incompatible with `nav` */ p.gfg background-color: green color: white /* There is no way to know whether `<div class="guide">` will be inside or outside `<div class="content">`, so Sass generates both to be safe */ .geeks .gfg border: 1px solid black border-radius: 4px /* Sass knows that every element matching "main.content" also matches ".content" and avoids generating unnecessary interleaved selectors */ 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.