Less延伸

extend 是一个 Less 伪类，它通过使用 :extend 选择器在一个选择器中扩展其他选择器样式。

扩展语法

扩展可以是附加到选择器，也可以是集中放置在规则，看上去像是带有选择器参数的可选伪类，然后紧跟关键字 all 。

    // 第一个块和第二个块做同样的事
    .x:extend(.y) {}
    .x{ &:extend(.y);}
    
    // 扩展 .y 元素选择器的所有实例
    .x:extend(.y all){}
    
    // 仅扩展选择器输出为 .y 的实例
    .x:extend(.y){}

扩展附加到选择器

附加到选择器的扩展在我们看来像是一个普通的伪类，带有选择器作为参数，一个选择器可以包含多个extend子句，但是所有扩展都必须在选择器的末尾。

• 在选择器之后扩展：pre:hover:extend(div pre)。
• 选择器和扩展之间允许有空格：pre:hover :extend(div pre)。
• 允许多个扩展：pre:hover:extend(div pre):extend(.bucket tr)。
• 不允许的：pre:hover:extend(div pre).nth-child(odd)，扩展必须是最后一个。

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

    .xkd_first,
    .xkd_second:extend(.vue),
    .xkd_three:extend(.python){
        // 内容代码
    }

扩展内侧规则

语法使用：&:extend(selector)，将扩展放置到主体中是将它放入这个规则集的每个选择器的快捷方式。

    // 在体内延伸
    pre:hover,.xkd_extend{
        &:extend(div pre);
    }
    
    // 与在每个选择器之后添加扩展名完全相同
    pre:hover:extend(div pre){
        .xkd_extend:extend(div pre){}
    }

扩展嵌套选择器

扩展能够匹配的嵌套的选择器，减少以下内容。

    // 带目标选择器的嵌套规则集
    .xkd{
        tr{
            background:green;
        	font-size:30px;
        }
    }
    .xkd_extend:extend(.xkd tr){}
    
    // 输出
    .xkd tr,.xkd_extend{
        background:green;
        font-size:30px;
    }
    // 从本质上讲，扩展将查看已编译的CSS，而不是原始的CSS

精确匹配扩展

默认情况下，extend查找选择器之间的精确匹配。

选择器是否使用前导星是很重要的，不管是第n个表达式有没有相同的含义，它们都需要有相同的形式才能匹配，唯一的例外是属性选择器中的引号，less 知道它们具有相同的含义并与之匹配。

    //　.y 选择器与它上面的所有选择器都不匹配
    .x.xkd,
    .xkd.x,
    .xkd > .x{
        font-size:30px;
    }
    .y:extend(.xkd){}
    
    // 选择器 *.class 和 .class 是等效的，但是扩展名与之并不匹配
    *.v3Xkd{
        font-size:30px;
    }
    .v2Xkd:extend(.v3Xkd){}

伪类的顺序很重要，比如选择器：link:hover:visited 和 link:visited:hover 两者匹配的元素集是相同的，但是extend将它们视为了不同的元素。

    // link:hover:visited
    link:hover:visited{
        color:green;
    }
    .selector:extend(link:visited:hover){}
    
    // 输出
    link:visited:visited{
        color:green;
    }

第n个表达式

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

    :nth-child(1n+3){
        font-size:30px;
    }
    .element:extend(:nth-child(n+3)){}
    
    // 输出
    :nth-child(1n+3){
        font-size:30px;
    }

属性选择器中的引用类型是无关紧要的，比如 [title=identifier]、[title='identifier']、[title="identifier"] 这三者，带引号，单引号还是双引号它们都是等效的，也就是说它们输出的值也是一样的。

全部扩展

当在 extend参数中最后被指定all 关键字时，它会告诉 Less 将这个选择器作为另一个选择器的一部分进行匹配，选择器将会被赋值，然后仅将选择器的匹配部分替换为扩展名，从而建立一个新的选择器。

    .x.y.z,
    .z.xkd {
      color: red;
    }
    .z {
      &:hover {
        color: green;
      }
    }
    .all:extend(.z all) {}
    
    // 输出
    .x.y.z,
    .z.xkd,
    .x.y.all,
    .all.xkd {
      color: red;
    }
    .z:hover,
    .all:hover {
      color: green;
    }

带扩展的选择器插值

extend不能够匹配带有变量的选择器，如果选择器包含变量，它将会把该变量忽略掉；这是一个未定的特性，但是不会轻易改变，但是extend可以连接插入性选择器。

以下是一个示例的对比：

    // 1:包含变量的选择器将不会被匹配：
    @var: .xkd_v3;
    //插入性选择器
    @{var}{  
        color: green;
    }
    //不做任何事
    .xkd_v2:extend(.xkd_v3){}
    
    // 2:在目标选择器进行extend中使用变量将不会被匹配
    .xkd_v3{
        color: green;
    }
    // 匹配不到选择器
    .xkd_v2:extend(@{var}){}
    @var: .xkd_v3;

上面的Less代码都将被编译为：

    .xkd_v3{
        color: green;
    }

除此之外，:extend 可以连接到插入性选择器，也就是说上面代码中的 .xkd_v3 选择器可以包含变量，但是 .xkd_v2 选择器不能包含变量。

在@media中范围/扩展

在媒体声明内编写的扩展应该只与同一媒体声明内的选择器匹配，也就是说写在一个media声明中的extend只能匹配在同一个media里面的选择器 。

重复检测

现在是没有重复检测的功能，所以在使用extend的时候需要注意不要extend具有相同规则的选择器。

使用情况

• 典型用例
  经典的用例就是为了避免添加一个基类 。

   .xkd{
       color: green;
       font-size: 30px;
   }
   .xkd_v2{
       .xkd;
   }
   .xkd_v3{
       .xkd;
   }
   
   编译为：
   .xkd,
   .xkd_v2,
   .xkd_v3{
       color: green;
       font-size: 30px;
   }
  

• 减小css大小
  Mixins将所有属性复制到选择器中，这可能导致不必要的重复，因此我们可以使用扩展而不是混合来将选择器上移到我们要使用的属性，从而减少生成的CSS。

     .mine{
         color: #fff;
         font-size: 16px;
     }
     .test1{
         &:extend(.mine);
     }
     .test2{
         &:extend(.mine);
     }
     
     编译为：
     .mine,
     .test1,
     .test2{
         color: #fff;
         font-size: 16px;
     }
  

• 组合样式/更高级的混合
  另一种使用情况是作为mixin的一种替代方法，因为mixin只能用在建档的选择器，如果在HTML中有两个不同的块(block)，但是需要应用同一个样式，那么这时候我们就可以使用extend去链接两个块元素。

     li.list >a{ ... }
     button.list-style{
         &:extend(li.list>a);
     }
  

更多学习参考：https://www.9xkd.com/