@extend

<div class="error error--serious">
  Oh no! You've been hacked!
</div>

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

Sass的@extend法则解决了这个问题。它写成@extend <selector>，并告诉Sass一个选择器应该继承另一个选择器的样式。

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

.error
  border: 1px #f00
  background-color: #fdd

  &--serious
    @extend .error
    border-width: 3px

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

当一个类扩展另一个类时，Sass设置所有与扩展器匹配的元素的样式，就好像它们也与要扩展的类匹配。当一个类选择器扩展另一个类选择器时，它的工作原理就像您将扩展类添加到HTML中已经具有扩展类的每个元素中一样。您只需编写class="error--serious"，Sass就会确保它的样式class="error"也是如此。

当然，选择器不只是在样式规则中单独使用。Sass知道可以扩展使用选择器的任何地方。这样可以确保元素的样式设置完全相同，就像它们与扩展选择器匹配一样。

.error:hover {
  background-color: #fee;
}

.error--serious {
  @extend .error;
  border-width: 3px;
}

.error:hover
  background-color: #fee


.error--serious
  @extend .error
  border-width: 3px

.error:hover, .error--serious:hover {
  background-color: #fee;
}

.error--serious {
  border-width: 3px;
}

如何运作永久它是如何工作

与mixins不同，mixins将样式复制到当前样式规则中，而是  @extend更新包含扩展选择器的样式规则，以便它们也包含扩展选择器。扩展选择器时，Sass会进行智能统一：

• 它永远不会生成#main#footer可能无法匹配任何元素的选择器。

• 它确保交错复杂的选择器，以便无论嵌套HTML元素的顺序如何，它们都可以工作。

• 它会尽可能地修剪冗余选择器，同时仍要确保特异性大于或等于扩展子的特异性。

• 它知道一个选择器何时与另一个选择器相匹配，并且可以将它们组合在一起。

• 它可以智能地处理组合器，通用选择器和包含选择器的伪类。

.content nav.sidebar {
  @extend .info;
}

// This won't be extended, because `p` is incompatible with `nav`.
p.info {
  background-color: #dee9fc;
}

// There's no way to know whether `<div class="guide">` will be inside or
// outside `<div class="content">`, so Sass generates both to be safe.
.guide .info {
  border: 1px solid rgba(#000, 0.8);
  border-radius: 2px;
}

// Sass knows that every element matching "main.content" also matches ".content"
// and avoids generating unnecessary interleaved selectors.
main.content .info {
  font-size: 0.8em;
}

.content nav.sidebar
  @extend .info


// This won't be extended, because `p` is incompatible with `nav`.
p.info
  background-color: #dee9fc


// There's no way to know whether `<div class="guide">` will be inside or
// outside `<div class="content">`, so Sass generates both to be safe.
.guide .info
  border: 1px solid rgba(#000, 0.8)
  border-radius: 2px


// Sass knows that every element matching "main.content" also matches ".content"
// and avoids generating unnecessary interleaved selectors.
main.content .info
  font-size: 0.8em

p.info {
  background-color: #dee9fc;
}

.guide .info, .guide .content nav.sidebar, .content .guide nav.sidebar {
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 2px;
}

main.content .info, main.content nav.sidebar {
  font-size: 0.8em;
}

占位符选择器permalink占位符选择器

有时您想编写仅用于扩展的样式规则。在这种情况下，您可以使用占位符选择器，它们看起来像以%而不是开头的类选择器.。CSS输出中不包括任何包含占位符的选择器，但扩展它们的选择器则包括在内。

.alert:hover, %strong-alert {
  font-weight: bold;
}

%strong-alert:hover {
  color: red;
}

.alert:hover, %strong-alert
  font-weight: bold


%strong-alert:hover 
  color: red

.alert:hover {
  font-weight: bold;
}

私人占位符永久链接私人占位符

与模块成员一样，可以通过以-或开头的占位符选择器将其标记为私有_。私有占位符选择器只能在定义它的样式表中扩展。对于任何其他样式表，看起来好像该选择器不存在。

扩展范围永久链接扩展范围

当一个样式表扩展了一个选择器时，该扩展将仅影响上游模块中编写的样式规则，即，该样式表使用该@use规则或@forwardrule加载的模块，这些模块加载的模块，依此类推。这有助于使@extend规则更具可预测性，确保规则仅影响编写时知道的样式。

强制性和可选性扩展永久链接强制性和可选性扩展

通常，如果一个@extend与样式表中的选择器不匹配，则Sass会产生错误。这有助于防止输入错误或重命名选择器，而无需重命名从其继承的选择器。要求扩展选择器存在的扩展是强制性的。

不过，这可能并不总是您想要的。如果您不希望@extend扩展选择器不存在，则只需添加!optional到末尾即可。

扩展还是混入？固定链接扩展还是混入？

扩展和混合是Sass中封装和重用样式的两种方式，这自然引起了何时使用哪种样式的问题。当您需要使用参数配置样式时，显然必须使用Mixins，但是如果它们只是一大堆样式呢？

根据经验，在表达语义类（或其他语义选择器）之间的关系时，扩展是最佳选择。由于具有class的元素.error--serious 是错误，因此对其进行扩展有意义.error。但是对于非语义样式集合，编写mixin可以避免级联的麻烦，并使配置线更加容易。

局限性永久性局限性

不允许的选择器永久链接不允许的选择器

兼容性（无化合物扩展名）：

Dart·Sass（Dart Sass）

✓

LibSass

✗

rubySass

✗

▶

只能扩展简单的选择器（如.info或的单个选择器a）。如果.message.info可以扩展，则的定义@extend 说匹配扩展器的元素将被设置为样式，就好像它们匹配了.message.info。这与同时匹配.message和  相同.info，因此编写代替不会有任何好处@extend .message, .info。

同样，如果.main .info可以扩展，它将（几乎）与.info自己扩展一样。细微的差别不值得看起来好像在做本质上不同的事情那样令人困惑，因此也不允许这样做。

.alert {
  @extend .message.info;
  //      ^^^^^^^^^^^^^
  // Error: Write @extend .message, .info instead.

  @extend .main .info;
  //      ^^^^^^^^^^^
  // Error: write @extend .info instead.
}

.alert
  @extend .message.info
  //      ^^^^^^^^^^^^^
  // Error: Write @extend .message, .info instead.

  @extend .main .info
  //      ^^^^^^^^^^^
  // Error: write @extend .info instead.

HTML启发式永久链接 HTML 启发式

当@extend 交错复杂的选择器时，它不会生成祖先选择器的所有可能组合。它可能生成的许多选择器不太可能实际匹配真实的HTML，而生成所有选择器会使样式表太大而几乎没有真正的价值。相反，它使用启发式方法：它假定每个选择器的祖先都是独立的，而不会与任何其他选择器的祖先交错。

header .warning li {
  font-weight: bold;
}

aside .notice dd {
  // Sass doesn't generate CSS to match the <dd> in
  //
  // <header>
  //   <aside>
  //     <div class="warning">
  //       <div class="notice">
  //         <dd>...</dd>
  //       </div>
  //     </div>
  //   </aside>
  // </header>
  //
  // because matching all elements like that would require us to generate nine
  // new selectors instead of just two.
  @extend li;
}

header .warning li
  font-weight: bold


aside .notice dd
  // Sass doesn't generate CSS to match the <dd> in
  //
  // <header>
  //   <aside>
  //     <div class="warning">
  //       <div class="notice">
  //         <dd>...</dd>
  //       </div>
  //     </div>
  //   </aside>
  // </header>
  //
  // because matching all elements like that would require us to generate nine
  // new selectors instead of just two.
  @extend li

header .warning li, header .warning aside .notice dd, aside .notice header .warning dd {
  font-weight: bold;
}

扩展为@media永久链接扩展为 @media

虽然@extend在@media其他CSS规则中允许使用，但不允许扩展出现在其规则之外的选择器。这是因为扩展选择器仅适用于给定的媒体上下文，并且无法确保在不复制整个样式规则的情况下保留在生成的选择器中的限制。

@media screen and (max-width: 600px) {
  .error--serious {
    @extend .error;
    //      ^^^^^^
    // Error: ".error" was extended in @media, but used outside it.
  }
}

.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media screen and (max-width: 600px)
  .error--serious
    @extend .error
    //      ^^^^^^
    // Error: ".error" was extended in @media, but used outside it.



.error
  border: 1px #f00
  background-color: #fdd