继承

Extend 是一个 Less 伪类，它可以将其上的选择器与它所引用的选择器进行合并。

发布于 v1.4.0

```less
nav ul {
  &:extend(.inline);
  background: blue;
}
```
在上面的规则集中，`:extend` 选择器将把 "extending selector" (`nav ul`) 应用到 `.inline` 类上，无论 `.inline` 类出现在哪里。声明块将保持不变，但不会引用 extend（因为 extend 不是 css）。

因此如下所示：

```less
nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}
```
输出

```less
nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}
```

请注意导航 `ul:extend(.inline)` 选择器是如何输出为 `nav ul` 的--在输出之前，extend 会被移除，选择器块保持原样。如果该块中没有放入任何属性，那么它就会从输出中移除（但 extend 仍可能影响其他选择器）。

### Extend 语法

extend 要么附在选择器上，要么放在规则集中。它看起来像一个伪类，带有选择器参数，可选择在其后添加关键字 all：

示例：

```less
.a:extend(.b) {}

// the above block does the same thing as the below block
.a {
  &:extend(.b);
}
```
```less
.c:extend(.d all) {
  // extends all instances of ".d" e.g. ".x.d" or ".d.x"
}
.c:extend(.d) {
  // extends only instances where the selector will be output as just ".d"
}
```
它可以包含一个或多个要扩展的类，以逗号分隔。

示例：

```less
.e:extend(.f) {}
.e:extend(.g) {}

// the above and the below do the same thing
.e:extend(.f, .g) {}
```
### Extend 附加到选择器

附加到选择器的 Extend 看起来就像一个普通的伪类，选择器是一个参数。一个选择器可以包含多个 extend 子句，但所有 extend 必须位于选择器的末尾。

- 在选择器之后扩展：`pre:hover:extend(div pre)`.
- 选择器和扩展之间允许有空格：`pre:hover :extend(div pre)`.
- 允许多次扩展：`pre:hover:extend(div pre):extend(.bucket tr)` - 请注意，这与 `pre:hover:extend(div pre, .bucket tr)` 相同
- 这是不允许的： `pre:hover:extend(div pre).nth-child(odd)`。扩展必须放在最后。

如果一个规则集包含多个选择器，其中任何一个都可以使用 extend 关键字。在一个规则集中包含多个带有 extend 关键字的选择器：

```less
.big-division,
.big-bag:extend(.bag),
.big-bucket:extend(.bucket) {
  // body
}
```
### Extend 内部规则集

可以使用 `&:extend(selector)` 语法将 extend 放入规则集的正文中。将 extend 放在正文中是将其放在规则集的每个选择器中的快捷方式。

在正文中扩展：

```less
pre:hover,
.some-class {
  &:extend(div pre);
}
```
与在每个选择器后添加扩展完全相同：

```less
pre:hover:extend(div pre),
.some-class:extend(div pre) {}
```
### Extending 嵌套选择器

Extend 能够匹配嵌套选择器。以下内容较少：

示例：

```less
.bucket {
  tr { // nested ruleset with target selector
    color: blue;
  }
}
.some-class:extend(.bucket tr) {} // nested ruleset is recognized
```
输出

```less
.bucket tr,
.some-class {
  color: blue;
}
```
从本质上讲，扩展会查看编译后的 css，而不是原始的 css。

示例：

```less
.bucket {
  tr & { // nested ruleset with target selector
    color: blue;
  }
}
.some-class:extend(tr .bucket) {} // nested ruleset is recognized
```
输出

```css
tr .bucket,
.some-class {
  color: blue;
}
```
### 精确匹配 Extend

Extend 默认查找选择符之间的完全匹配。选择符是否使用前导星并不重要。两个第 n 个表达式是否具有相同的含义并不重要，重要的是它们必须具有相同的形式才能匹配。唯一的例外是属性选择器中的引号，less 知道它们具有相同的含义并进行匹配。

示例：

```less
.a.class,
.class.a,
.class > .a {
  color: blue;
}
.test:extend(.class) {} // this will NOT match the any selectors above
```
前导星确实很重要。选择器 `*.class` 和 `.class` 是等价的，但 extend 不会匹配它们：

```less
*.class {
  color: blue;
}
.noStar:extend(.class) {} // this will NOT match the *.class selector
```
输出

```less
*.class {
  color: blue;
}
```
伪类的顺序确实很重要。选择器 `link:hover:visited` 和 `link:visited:hover` 匹配的是同一组元素，但 extend 将它们视为不同的元素：

```less
link:hover:visited {
  color: blue;
}
.selector:extend(link:visited:hover) {}
```
输出

```less
link:hover:visited {
  color: blue;
}
```
### 第 n 个表达式

第 n 个表达式的形式确实很重要。第 n 个表达式 `1n+3` 和 `n+3` 是等价的，但 extend 不会匹配它们：

```less
:nth-child(1n+3) {
  color: blue;
}
.child:extend(:nth-child(n+3)) {}
```
输出

```less
:nth-child(1n+3) {
  color: blue;
}
```
属性选择器中的引号类型并不重要。以下所有内容都是等价的。

```less
[title=identifier] {
  color: blue;
}
[title='identifier'] {
  color: blue;
}
[title="identifier"] {
  color: blue;
}

.noQuote:extend([title=identifier]) {}
.singleQuote:extend([title='identifier']) {}
.doubleQuote:extend([title="identifier"]) {}
```
输出

```less
[title=identifier],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}

[title='identifier'],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}

[title="identifier"],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}
```
### Extend "all"

当你在 extend 参数中最后指定 all 关键字时，它会告诉 Less 将该选择器匹配为另一个选择器的一部分。选择器将被复制，然后只用 extend 替换选择器的匹配部分，形成一个新的选择器。

示例：

```less
.a.b.test,
.test.c {
  color: orange;
}
.test {
  &:hover {
    color: green;
  }
}

.replacement:extend(.test all) {}
```
输出

```less
.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
  color: orange;
}
.test:hover,
.replacement:hover {
  color: green;
}
```
你可以把这种操作模式看作是进行非破坏性的搜索和替换。

### 选择器插值与 Extend

Extend 无法匹配包含变量的选择器。如果选择器包含变量，extend 将忽略它。

不过，extend 可以附加到插值选择器。

带有变量的选择器将不会被匹配：

```less
@variable: .bucket;
@{variable} { // interpolated selector
  color: blue;
}
.some-class:extend(.bucket) {} // does nothing, no match is found
```
而在目标选择器中使用变量进行扩展则什么也匹配不到：

```css
.bucket {
  color: blue;
}
.some-class:extend(@{variable}) {} // interpolated selector matches nothing
@variable: .bucket;
```
上述两个例子都编译成了：

```css
.bucket {
  color: blue;
}
```
不过，与插值选择器相连的 `:extend` 可以工作：

```less
.bucket {
  color: blue;
}
@{variable}:extend(.bucket) {}
@variable: .selector;
```
编译为：

```less
.bucket, .selector {
  color: blue;
}
```
### 作用域/内部 Extend @media

目前，`@media` 声明中的 `:extend` 只匹配同一媒体声明中的选择器：

```less
@media print {
  .screenClass:extend(.selector) {} // extend inside media
  .selector { // this will be matched - it is in the same media
    color: black;
  }
}
.selector { // ruleset on top of style sheet - extend ignores it
  color: red;
}
@media screen {
  .selector {  // ruleset inside another media - extend ignores it
    color: blue;
  }
}
```
编译为：

```css
@media print {
  .selector,
  .screenClass { /*  ruleset inside the same media was extended */
    color: black;
  }
}
.selector { /* ruleset on top of style sheet was ignored */
  color: red;
}
@media screen {
  .selector { /* ruleset inside another media was ignored */
    color: blue;
  }
}
```
**注意：**扩展不匹配嵌套的 `@media` 声明中的选择器：

```less
@media screen {
  .screenClass:extend(.selector) {} // extend inside media
  @media (min-width: 1023px) {
    .selector {  // ruleset inside nested media - extend ignores it
      color: blue;
    }
  }
}
```
编译为：

```css
@media screen and (min-width: 1023px) {
  .selector { /* ruleset inside another nested media was ignored */
    color: blue;
  }
}
```
顶层扩展匹配所有内容，包括嵌套媒体内的选择器：

```less
@media screen {
  .selector {  /* ruleset inside nested media - top level extend works */
    color: blue;
  }
  @media (min-width: 1023px) {
    .selector {  /* ruleset inside nested media - top level extend works */
      color: blue;
    }
  }
}

.topLevel:extend(.selector) {} /* top level extend matches everything */
```
编译为：

```css
@media screen {
  .selector,
  .topLevel { /* ruleset inside media was extended */
    color: blue;
  }
}
@media screen and (min-width: 1023px) {
  .selector,
  .topLevel { /* ruleset inside nested media was extended */
    color: blue;
  }
}
```
### 重复检测

目前没有重复检测功能。

示例：

```less
.alert-info,
.widget {
  /* declarations */
}

.alert:extend(.alert-info, .widget) {}
```
输出

```less
.alert-info,
.widget,
.alert,
.alert {
  /* declarations */
}
```
### Extend 使用案例

#### 经典用例
典型的用例是避免添加基类。例如，如果您有

```less
.animal {
  background-color: black;
  color: white;
}
```
如果您想让动物的子类型覆盖背景颜色，您有两个选择，首先更改 HTML

```html
<a class="animal bear">Bear</a>
```
```css
.animal {
  background-color: black;
  color: white;
}
.bear {
  background-color: brown;
}
```
或使用简化的 html 并在您的 less 中扩展。

```html
<a class="bear">Bear</a>
```
```less
.animal {
  background-color: black;
  color: white;
}
.bear {
  &:extend(.animal);
  background-color: brown;
}
```
#### 减少 CSS 大小
Mixins 会将所有属性复制到选择器中，这会导致不必要的重复。因此，你可以使用扩展而不是混合体，将选择器移到你希望使用的属性上，从而减少 CSS 的生成。

示例 - 使用 mixin：

```less
.my-inline-block() {
  display: inline-block;
  font-size: 0;
}
.thing1 {
  .my-inline-block;
}
.thing2 {
  .my-inline-block;
}
```
输出

```less
.thing1 {
  display: inline-block;
  font-size: 0;
}
.thing2 {
  display: inline-block;
  font-size: 0;
}
```
示例（有 extends）：

```less
.my-inline-block {
  display: inline-block;
  font-size: 0;
}
.thing1 {
  &:extend(.my-inline-block);
}
.thing2 {
  &:extend(.my-inline-block);
}
```
输出

```less
.my-inline-block,
.thing1,
.thing2 {
  display: inline-block;
  font-size: 0;
}
```
#### 组合样式/更高级的 Mixin
另一种用法是替代 mixin--因为 mixin 只能与简单的选择器一起使用，如果您有两个不同的 HTML 块，但需要对两个块应用相同的样式，您可以使用 extends 来关联两个区域。

示例：

```less
li.list > a {
  // list styles
}
button.list-style {
  &:extend(li.list > a); // use the same list styles
}
```