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:

filter_none

edit
close

play_arrow

link
brightness_4
code

@extend <selector>

chevron_right


Example:

SASS

filter_none

edit
close

play_arrow

link
brightness_4
code

.gfg
  border: 1px green
  background-color: black
  font-family: sans-serif
  
  &--geeks
    @extend .gfg
    border-width: 4px

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

.gfg:hover
  border: 1px green
  background-color: black
  font-family: sans-serif
  
.gfg--geeks
  @extend .gfg
  border-width: 4px

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

.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

chevron_right


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.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.