Less 延伸

时间 2019-11-26

标签延伸繁體版

原文原文链接

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

扩展语法

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

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

扩展附加到选择器

附加到选择器的扩展在咱们看来像是一个普通的伪类，带有选择器做为参数，一个选择器能够包含多个extend子句，可是全部扩展都必须在选择器的末尾。python

在选择器以后扩展：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关键字的，在一个规则集中扩展的多个选择器。less

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

扩展内侧规则

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

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

扩展嵌套选择器

扩展可以匹配的嵌套的选择器，减小如下内容。code

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

精确匹配扩展

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

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

//　.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将它们视为了避免同的元素。it

// 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);
  }
```