Sass @extend Rule

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:

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:

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 contain 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 order 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:

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.