Less（v3.9.0）使用详解—extend（扩展）

该系列：

Less(v3.9.0)使用详解——基本使用

Less(v3.9.0)使用详解——变量

Less(v3.9.0)使用详解——嵌套和父选择器&

Less(v3.9.0)使用详解——extend(嵌套)

其他待更新...

Extend（扩展）

:extend(selector1,[selector2,...]),就像css中的伪类，不过可以传递至少1个选择器，:之前的选择器,将与（）中的选择器共用一份样式

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

//当不需要引用选择器时，也可以不用&
nav ul:extend(.inline){
  background: blue;
}
.inline {
  color: red;
}
复制代码

编译为

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}
复制代码

extend能包含多个选择器，用逗号隔开

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

// 等同于下面
.e:extend(.f, .g) {}
复制代码

extend必须放在选择器末尾，注意这个pre:hover:extend(div pre):extend(.bucket tr)是允许的，等同于pre:hover:extend(div pre, .bucket tr)

如果规则集包含多个选择器，则它们中的任何一个选择器都可以具有extend关键字。

.a,
.b:extend(.bag),
.c:extend(.bucket) {
  width:100px;
}
.bag{
  color:white;
}
.bucker{
  heigth:100px;
}
复制代码

编译为

.a,
.b,
.c {
  width: 100px;
}
.bag,
.b {
  color: white;
}
.bucker {
  heigth: 100px;
}
复制代码

如何规则集的extend一样，可以省略前面的

pre:hover:extend(div pre),
.some-class:extend(div pre) {}
复制代码

可以省略第一个extend

pre:hover,
.some-class {
  &:extend(div pre);
}
复制代码

extend同样适用于嵌套规则

.bucket {
  tr { 
    color: blue;
  }
}
.some-class:extend(.bucket tr) {} 
复制代码

编译为

.bucket tr,
.some-class {
  color: blue;
}
复制代码

:extend中选择符是精确匹配的

.a.class,
.class.a,
.class > .a {
  color: blue;
}
.test:extend(.class) {} // this will NOT match the any selectors above
复制代码

因为找不到匹配.class,所以编译为

.a.class,
.class.a,
.class > .a {
  color: blue;
}
复制代码

注意即使*.class和.class在css中匹配的是一样的，但extend不会匹配它

*.class {
  color: blue;
}
.noStar:extend(.class) {} // this will NOT match the *.class selector
复制代码

注意伪选择器的顺序也有会影响匹配的

link:hover:visited {
  color: blue;
}
.selector:extend(link:visited:hover) {}
复制代码

不会匹配到

nth表达式也会影响匹配，1n+3和n+3是不一样的.

:nth-child(1n+3) {
  color: blue;
}
.child:extend(:nth-child(n+3)) {}
复制代码

编译为

:nth-child(1n+3) {
  color: blue;
}
复制代码

不过extend倒是不在意单/双引号

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

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

编译为

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

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

[title="identifier"],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}
复制代码

extend包含all时，会把()里的选择器匹配，然后用:extend之前的选择器创建新的选择器

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

.replacement:extend(.test all) {}
复制代码

编译为

.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
  color: orange;
}
.test:hover,
.replacement:hover {
  color: green;
}
复制代码

可以发现到除了旧的选择器组合外，又有了新的组合，即.test被.replacement取代出现的新的选择器

extend()参数不支持变量，但：支持变量

@variable: .bucket;
@{variable} { // interpolated selector
  color: blue;
}
.some-class:extend(.bucket) {} // does nothing, no match is found
复制代码

.bucket {
  color: blue;
}
.some-class:extend(@{variable}) {} // interpolated selector matches nothing
@variable: .bucket;
复制代码

以上两个都只能编译为

.bucket {
  color: blue;
}
复制代码

然而

.bucket {
  color: blue;
}
@{variable}:extend(.bucket) {}
@variable: .selector;
复制代码

就能识别

.bucket, .selector {
  color: blue;
}
复制代码

@media中的extend只能匹配处于同个media规则的选择器

@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;
  }
}
复制代码

编译成

@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 screen {
  .screenClass:extend(.selector) {} // extend inside media
  @media (min-width: 1023px) {
    .selector {  // ruleset inside nested media - extend ignores it
      color: blue;
    }
  }
}
复制代码

编译成

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

不过最顶级的extend就能匹配任意位置

@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 */
复制代码

编译成

@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;
  }
}
复制代码

使用场景

1. 避免添加一个基类

   不使用的情况下

   <a class="animal bear">Bear</a>
   .animal {
     background-color: black;
     color: white;
   }
   .bear {
     background-color: brown;
   }
   复制代码

   使用后可以简化html，个人觉得见仁见智，不使用的情况语义更好理解

   <a class="bear">Bear</a>
   .animal {
     background-color: black;
     color: white;
   }
   .bear {
     &:extend(.animal);
     background-color: brown;
   }
   复制代码

2. 减少css体积，mixin将所有属性复制到一个选择器中，这会导致不必要的重复。因此，您可以使用 :extend 而不是mixin将选择器移到您希望使用的属性，这样会大大减少生成的css。

   使用mixin:

   .my-inline-block() {
     display: inline-block;
     font-size: 0;
   }
   .thing1 {
     .my-inline-block;
   }
   .thing2 {
     .my-inline-block;
   }
   复制代码

   Outputs

   .thing1 {
     display: inline-block;
     font-size: 0;
   }
   .thing2 {
     display: inline-block;
     font-size: 0;
   }
   复制代码

   使用extends

   .my-inline-block {
     display: inline-block;
     font-size: 0;
   }
   .thing1 {
     &:extend(.my-inline-block);
   }
   .thing2 {
     &:extend(.my-inline-block);
   }
   复制代码

   Outputs

   .my-inline-block,
   .thing1,
   .thing2 {
     display: inline-block;
     font-size: 0;
   }
   复制代码

3. 关联某个样式，由于mixin只能使用简单的选择器，如果界面有两个不同的块但使用相同的样式，在用不了minxin的情况可以这样使用

   li.list > a {
     // list styles
   }
   button.list-style {
     &:extend(li.list > a); // use the same list styles
   }
   复制代码