Less – Extend（继承）

Extend是Less的一个伪类，通过使用:Extend伪类，可以让一个选择器继承/包含另一个选择器的样式。

less代码：

.a {
    &:extend(.b);  // 这里的 & 为 父选择符，表示当前父选择符.a，此处含义：.a:extend(.b)
    font-size: 12px;
}

.b {
    font-weight: bold;
}

编译后css输出：

.a {
  font-size: 12px;
}
.b,
.a {
  font-weight: bold;  
}

可以看到.a继承了.b的样式。

Extend 语法

:extend()可以附加到选择器后面，也可以放到样式规则中，它看起来就像是一个选择器的伪类，在使用的时候我们可以选择性的加上关键字all。

1. Extend附加到选择器后面

Extend可以直接附加到选择后面，看起来就像选择器的伪类，Extend的参数是要继承的选择器。Extend的格式要求：

• Extend必须附加在选择器的后面，例如:pre:hover:extend (div pre)
• 选择器和Extend之间可以有空格，例如:pre:hover :extend(div pre)
• 允许多个Extend，例如:pre:hover:extend(div pre):extend(.button) 或 pre:hover:extend(div pre, .button)
• Extend必须在选择器的末尾，不允许使用pre:hover:extend(div pre).n -child(odd)

less代码：

.style:extend(.img, .container) {
   background: #BF70A5;
}
.container{
   font-style: italic;
}
.img {
    font-size: 45px;
}

编译后css输出：

.style {
  background: #BF70A5;
}
.container,
.style {
  font-style: italic;
}
.img,
.style {
  font-size: 45px;
}

2. 选择器内部的Extend

&:extend(selector) 格式的Extend可以放在选择器内部。&符号表示当前父选择器。

less代码：

.style{
   &:extend(.img, .container);
   background: #BF70A5;
}
.container{
   font-style: italic;
}
.img {
    font-size: 45px;
}

编译后css输出：

.style {
  background: #BF70A5;
}
.container,
.style {
  font-style: italic;
}
.img,
.style {
  font-size: 45px;
}

3. Extend参数匹配嵌套选择器

Extend的参数可以匹配嵌套选择器。

less代码：

.style {
   h3 {
      color: #BF70A5;
      font-size: 30px;
   }
}
.img:extend(.style h3){}

编译后css输出：

.style h3,
.img {
   color: #BF70A5;
   font-size: 30px;
}

4. Extend参数与选择器之间是精确匹配的

Extend参数与选择器之间是精确匹配的。:extend(.style)精确匹配.style，但不会匹配*.style，虽然.style与*.style含义相同。

5. 使用 n 的选择器 、使用属性筛选的选择器

1n+3和n+3相当，但:extend不会匹配他们：

:nth-child(1n+3) {
  color: blue;
}
.child:extend(n+3) {} // 无法匹配

在属性选择器中的引用类型无关紧要。以下所有都是相同的。

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

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

6. 关键字 all的使用

Extend参数中末尾附加all，起一个通配作用，例如:extend(.nav all)，Less在匹配选择器时会匹配.nav xxxx这样的选择器。

less代码：

.style.nav,
.nav h3 {
   color: orange;
}

.nav {
   &:hover {
      color: green;
   }
}
.container:extend(.nav all) {}

编译后css输出：

.style.nav,
.nav h3,
.style.container,
.container h3 {
   color: orange;
}

.nav:hover,
.container:hover {
   color: green;
}

7. 选择器插值与Extend

变量名或选择器中可以用@{变量名}的方式引用变量，Extend不能匹配带有@{变量名}的选择器。

带有@{变量名}的选择器可以使用Extend。

less代码：

.style {
   color: #BF70A5;
   font-style: italic;
}
@{variable}:extend(.style) {}
@variable: .selector;

编译后css输出：

.style,
.selector {
   color: #BF70A5;
   font-style: italic;
}

8. Extend与@media声明范围

Extend只匹配当前@media声明范围中的选择器。

less代码：

@media print {
  .screenClass:extend(.selector) {} // extend inside media
  .selector { // 这会被匹配到 - 以为和extend在同一个media内
    color: black;
  }
}
.selector { // 规则集在上一个样式中 - extend 将忽略这
  color: red;
}
@media screen {
  .selector {  // r规则集在另一个样式中 - extend 将忽略这
    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;
  }
}

在媒体声明中写入的 extend ，不匹配其嵌套声明中的选择器:

less代码：

@media screen {
  .screenClass:extend(.selector) {} // extend inside media
  @media (min-width: 1023px) {
    .selector {  // css在media内部嵌套 - extend 将忽略它
      color: blue;
    }
  }
}

编译后css输出：

@media screen and (min-width: 1023px) {
  .selector { /* ruleset inside another nested media was ignored */
    color: blue;
  }
}

顶级 :extend 将匹配所有内容，包括嵌套媒体中的选择器

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) {} /* 定层级 :extend 匹配所有 */

编译后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;
  }
}

9. 重复检测

Extend使用时无法检测出选择器重复。

less代码：

.cont-main,
.style {
   font-family: "Comic Sans MS";
   font-size: 30px;
}

.cont-main {
   font-size: 30px;
}
.cont:extend(.cont-main, .style) {}

编译后css输出：

.cont-main,
.style,
.cont,
.cont {
   font-family: "Comic Sans MS";
   font-size: 30px;
}

.cont-main,
.cont {
   font-size: 30px;
}

Extend 使用场景

• 典型场景：避免重复添加基类
• 减少CSS文件大小：Extend有助于精简CSS代码
• 结合样式 / 更高级的混合：作为mixin的替代方案——我们可以将特定选择器的样式放进另一个选择器。