Sass @extend 规则

当一个类需要具有另一个类的样式以及它自己的特定样式时，可以使用 Sass @extend规则。这条规则告诉 Sass 一个选择器应该从另一个选择器继承类。

句法：

@extend 

例子：

SASS

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

输出：

.gfg, .gfg--geeks {
  border: 1px green;
  background-color: black;
  font-family: sans-serif;
}
.gfg--geeks {
  border-width: 4px;
}

当一个类扩展另一个类时，Sass 样式是匹配扩展器的元素，就好像它们也匹配被扩展的类。选择器不仅仅在样式规则中单独使用。 Sass 知道在使用选择器的任何地方进行扩展。这确保元素的样式与扩展选择器完全匹配。

例子：

SASS

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

输出：

.gfg:hover, .gfg--geeks:hover {
  border: 1px green;
  background-color: black;
  font-family: sans-serif;
}
.gfg--geeks {
  border-width: 4px;
}

规则的工作： @extend规则更新包含扩展选择器的样式规则，使其包含扩展选择器。在扩展选择器时，Sass 通过从不生成像#main#footer这样不可能匹配任何元素的选择器来实现智能统一。它还确保复杂的选择器是交错的，这样无论 HTML 元素嵌套在哪个顺序，它们都可以工作。

智能统一也是通过尽可能修剪冗余选择器来完成的，同时仍然确保特异性大于或等于扩展器的特异性。简而言之，它可以智能地处理组合器、通用选择器和包含选择器的伪类。

例子：

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
  `
` will be inside
   or outside `
`,
   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

输出：

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 的智能统一。 selector.unify()函数返回一个匹配两个选择器的交集的选择器，而 selector.extend()函数的工作方式就像@extend ，但在单个选择器上。