@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 一个选择器应该继承另一个选择器的样式。

¥Sass’s @extend rule solves this. It’s written @extend <selector>, and it tells Sass that one selector should inherit the styles of another.

.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" 一样。

¥When one class extends another, Sass styles all elements that match the extender as though they also match the class being extended. When one class selector extends another, it works exactly as though you added the extended class to every element in your HTML that already had the extending class. You can just write class="error--serious", and Sass will make sure it’s styled as though it had class="error" as well.

当然，选择器不仅仅在样式规则中单独使用。Sass 知道要在使用选择器的任何地方进行扩展。这可确保你的元素的样式与扩展选择器完全匹配。

¥Of course, selectors aren’t just used on their own in style rules. Sass knows to extend everywhere the selector is used. This ensures that your elements are styled exactly as if they matched the extended selector.

.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;
}

工作原理工作原理 permalink

¥How It Works

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

¥Unlike mixins, which copy styles into the current style rule, @extend updates style rules that contain the extended selector so that they contain the extending selector as well. When extending selectors, Sass does intelligent unification:

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

  ¥It never generates selectors like #main#footer that can’t possibly match any elements.

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

  ¥It ensures that complex selectors are interleaved so that they work no matter which order the HTML elements are nested.

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

  ¥It trims redundant selectors as much as possible, while still ensuring that the specificity is greater than or equal to that of the extender.

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

  ¥It knows when one selector matches everything another does, and can combine them together.

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

  ¥It intelligently handles combinators, universal selectors, and pseudo-classes that contain selectors.

.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

¥Placeholder Selectors

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

¥Sometimes you want to write a style rule that’s only intended to be extended. In that case, you can use placeholder selectors, which look like class selectors that start with % instead of .. Any selectors that include placeholders aren’t included in the CSS output, but selectors that extend them are.

.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;
}

私有占位符私有占位符 permalink

¥Private Placeholders

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

¥Like module members, a placeholder selector can be marked private by starting its name with either - or _. A private placeholder selector can only be extended within the stylesheet that defines it. To any other stylesheets, it will look as though that selector doesn’t exist.

扩展范围扩展范围 permalink

¥Extension Scope

当一个样式表扩展选择器时，该扩展只会影响上游模块中编写的样式规则，即该样式表使用 @use 规则 或 @forward 规则 加载的模块、这些模块加载的模块等等。这有助于使你的 @extend 规则更具可预测性，确保它们仅影响你在编写规则时意识到的样式。

¥When one stylesheet extends a selector, that extension will only affect style rules written in upstream modules—that is, modules that are loaded by that stylesheet using the @use rule or the @forward rule, modules loaded by those modules, and so on. This helps make your @extend rules more predictable, ensuring that they affect only the styles you were aware of when you wrote them.

强制和可选扩展强制和可选扩展 permalink

¥Mandatory and Optional Extends

通常，如果 @extend 与样式表中的任何选择器都不匹配，Sass 将产生错误。这有助于防止拼写错误或重命名选择器而不重命名从它继承的选择器。要求扩展选择器存在的扩展是强制性的。

¥Normally, if an @extend doesn’t match any selectors in the stylesheet, Sass will produce an error. This helps protect from typos or from renaming a selector without renaming the selectors that inherit from it. Extends that require that the extended selector exists are mandatory.

但这可能并不总是你想要的。如果你希望 @extend 在扩展选择器不存在时不执行任何操作，只需将 !optional 添加到末尾即可。

¥This may not always be what you want, though. If you want the @extend to do nothing if the extended selector doesn’t exist, just add !optional to the end.

扩展还是混合？扩展还是混合？ permalink

¥Extends or Mixins?

Extends 和 混入 都是 Sass 中封装和重用样式的方式，这自然会引发何时使用哪一种的问题。当你需要使用 参数 配置样式时，Mixin 显然是必要的，但如果它们只是一大块样式怎么办？

¥Extends and mixins are both ways of encapsulating and re-using styles in Sass, which naturally raises the question of when to use which one. Mixins are obviously necessary when you need to configure the styles using arguments, but what if they’re just a chunk of styles?

根据经验，当你表达语义类（或其他语义选择器）之间的关系时，扩展是最佳选择。因为类 .error--serious 的元素是一个错误，所以它扩展 .error 是有意义的。但对于非语义样式集合，编写 mixin 可以避免级联问题，并使配置更容易。

¥As a rule of thumb, extends are the best option when you’re expressing a relationship between semantic classes (or other semantic selectors). Because an element with class .error--serious is an error, it makes sense for it to extend .error. But for non-semantic collections of styles, writing a mixin can avoid cascade headaches and make it easier to configure down the line.

局限性局限性 permalink

¥Limitations

不允许的选择器不允许的选择器 permalink

¥Disallowed Selectors

兼容性 (No Compound Extensions):

Dart Sass

✓

LibSass

✗

Ruby Sass

✗

➤

只能扩展简单的选择器（例如 .info 或 a 等单独的选择器）。如果 .message.info 可以扩展，那么 @extend 的定义表明与扩展器匹配的元素将被设计为与 .message.info 匹配一样。这与同时匹配 .message 和 .info 是一样的，所以用 @extend .message, .info 来代替 .message 并没有任何好处。

¥Only simple selectors—individual selectors like .info or a—can be extended. If .message.info could be extended, the definition of @extend says that elements matching the extender would be styled as though they matched .message.info. That’s just the same as matching both .message and .info, so there wouldn’t be any benefit in writing that instead of @extend .message, .info.

类似地，如果 .main .info 可以扩展，它会做（几乎）与单独扩展 .info 相同的事情。细微的差异并不值得让人困惑，因为它看起来像是在做一些本质上不同的事情，所以这也是不允许的。

¥Similarly, if .main .info could be extended, it would do (almost) the same thing as extending .info on its own. The subtle differences aren’t worth the confusion of looking like it’s doing something substantially different, so this isn’t allowed either.

.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 启发式 permalink

¥HTML Heuristics

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

¥When @extend interleaves complex selectors, it doesn’t generate all possible combinations of ancestor selectors. Many of the selectors it could generate are unlikely to actually match real HTML, and generating them all would make stylesheets way too big for very little real value. Instead, it uses a heuristic: it assumes that each selector’s ancestors will be self-contained, without being interleaved with any other selector’s ancestors.

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 中扩展 permalink

¥Extend in @media

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

¥While @extend is allowed within @media and other CSS at-rules, it’s not allowed to extend selectors that appear outside its at-rule. This is because the extending selector only applies within the given media context, and there’s no way to make sure that restriction is preserved in the generated selector without duplicating the entire style rule.

@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