Sass @extend Rule

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.