Less学习（四）----扩展（Extend）

扩展(Extend)

选择器:extend(选择器参数){ }
扩展是less里的伪类,作用是 将选择器与匹配它引用的选择器合并在一起
简单地说，就是 在extend里选择器参数出现的设置规则的时候,也会给extend前的选择器给予同样的规则,相当于非破坏性的搜索和替换（）
.a:extend(.b){ } .b{ 样式规则 } 等价于 .b, .a{ 样式规则 }
在输出之前会移除扩展,选择器块仍然保持不变,当没有向扩展里放属性时,在输出的时候会移除扩展,不过仍然可能对其他选择器有影响(不太清楚有啥影响))
1)语法
extend可以绑定在选择器上也可以放在规则设置里,在选择器参数后可以添加 关键字 all,添加了 all 后,只要有 选择器参数出现的地方都会产生扩展, 没有关键字 all 时,只有 选择器参数单独出现的时候才会产生扩展
有多个选择器参数时可以使用 ‘,’ 隔开,和写多个 扩展是一样的
.a:extend(.b){ } 等价于 .a{ &:extend(.b); }
.a:extend(.b),.c:extend(.d){} 等价于 .a:extend(.b){} .c:extend(.d){}
(1) 没有关键字all
.a:extend(.b){ } .b.c{ 样式规则//此时的样式是不会渲染到 .a.c ,只会渲染 .b.c }
(2)关键字 all
.a:extend(.b all){ } .b.c{ 样式规则//此时的样式是能够渲染到 .a.c } 相当于 .b.c, .a.c{ 样式规则 }
2)绑定在选择器上
一个选择器上可以绑定多个伪类,但是 扩展必须在最后,多个选择器里部分选择器绑定 扩展和单独绑定扩展是一样的

Extend after the selector: pre:hover:extend(div pre).
1.extend放在选择器后面
Space between selector and extend is allowed: pre:hover :extend(div pre).
2.选择器和 extend 中间可以有空格
Multiple extends are allowed: pre:hover:extend(div pre):extend(.bucket tr) - Note this is the same as pre:hover:extend(div pre, .bucket tr)
3.可以绑定多个 extend ,它和绑定一个 extend 里面出现多个 选择器参数是一样的
This is NOT allowed: pre:hover:extend(div pre).nth-child(odd). Extend must be last.
4.extend 必须在最后

3)绑定在嵌套里
绑定时将 选择器参数 设置为所需要的嵌套里的选择器即可
4)扩展是精确匹配
*.class 和 .class 在 extend 里是不一样的
伪类是没有顺序的,但是在扩展里伪类的顺序是有影响的,伪类顺序不同匹配的也不一样
link:hover:visited {
color: blue;
}
.selector:extend(link:visited:hover) {}
Outputs
link:hover:visited {
color: blue;
}
5)当扩展的 参数选择器 是变量时,什么也匹配不到,但是 选择器 是变量时可以匹配到
== emmmmmmmmm 还存在问题==
6)定义在 media 里的 范围/扩展
1.定义在media 标签的扩展,只有同样的 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;
}
}
compiles into:
@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;
}
}

2.嵌套的media 标签的扩展,不会生效(不会匹配)

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

3.顶级扩展匹配一切,即使是嵌套的 media 标签扩展
我的理解就是 把扩展放在 media 标签的外面

@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 /
compiles into:
@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;
}
}

4.摹本识别(Duplication Detection),可能是这样叫吧,有道翻译的可能不太准确
扩展里有多个参数选择器时,在匹配时这些参数选择器都会被替换成 选择器
.a, .b{
样式规则
}
.c:extend(.a, .b){}
编译成
.a, .b, .c, .c{}

.alert-info,
.widget {
/* declarations /
}
.alert:extend(.alert-info, .widget) {}
Outputs
.alert-info,
.widget,
.alert,
.alert {
/ declarations */
}

7)减少 css 代码
使用混合时会把所有的属性都拷贝一份,会导致重复的代码
而扩展可以引入你想要的属性即可,会减少重复代码的产生
.a{
.a 的样式规则
}
使用混合时
.b{
.a
}
.a{
.a 的样式规则
}
.b{
.a的样式规则
}
使用扩展时
.b :extend (.a){}
.a,.b{
.a 的样式规则
}

<template>
  <div class="lessextend">
    <div class="container content">
      <div class="content nokeyall">
        nokeyall
      </div>
      <div class="keyallwrapper keyy">
        <div class="havekeyall">
          havekeyall
        </div>
      </div>
    </div>
    <div class="wrapper">wrapper</div>
    <div class="exact box">box</div>
    <div class="chest">chest</div>
    <div class="bin">bin</div>
    <div class="nestextend">nestextend</div>
    <div class="varwrapper">
      varwrapper
      <div class="varextend">varexyend</div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{

    }
  }
}
</script>
<style lang="less" scoped>
  @import './lessextend';
</style>

@width: 200px;
// extend语法
// .content 里设置的样式规则也会应用到 .container 上, 前提是 只有设置 .content 的样式时
.container:extend(.nokeyall){
  color: red;
  width: @width - 100px;
  height: @width;
  padding: 30px;
  margin: 0 auto;
}
// 因为 .container 扩展了 .nokeyall 的样式,因此 .container 上也会有边框,还会有下边距
.nokeyall{
  border: 2px solid hotpink;
  margin-bottom: 10px;
}

// complies to
// .container{
//   color: red;
//   width: @width - 100px;
//   height: @width;
// }
// .nokeyall , .container{
//   border: 2px solid hotpink;
// }

// 不会匹配 .cotent.container ,因为没有关键字 all
.content.nokeyall{
  background-color: lightblue;
}
// 关键字 all
.keyallwrapper:extend(.havekeyall all){

}

// .havekeyall{
// }
// 能够匹配到 .keyallwrapper.keyy
.havekeyall.keyy{
  border-top: 2px solid saddlebrown;
}

// 多个选择器部分绑定扩展时和单个绑定是一样的
.wrapper,
.box:extend(.setcolor),
.chest:extend(.setback)
{
  margin-top: 20px;
}

.setback{
  background-color: aqua;
}

// 与上面写在一起的是一样的效果
// .wrapper{
//   margin-top: 20px;
// }
// .box:extend(.setcolor){
//   margin-top: 20px;
// }
// .chest:extend(.setback){
//   margin-top: 20px;
// }

// 嵌套里的扩展
.lessextend{
  .bin{
    border:3px dotted darkblue;
    margin-top: 10px;
  }
  .exact.box{
    background-color: chocolate;
  }
  *.box{
    border-bottom: 2px solid black;
  }
}
.nestextend:extend(.lessextend .bin){

}
// 不会把 box上的背景色  box的下边框 渲染到 .nestextend 上
// 扩展是精确匹配,因此匹配不到 .lessextend .box
.nestextend:extend(.lessextend .box){

}
问题开始
// 选择器的参数是变量时
// 报错：Variable @varextend is undefined
// @varclass: varextend;
// .varwrapper:extend(.@{varextend}){

// }
// .varextend{
//   border: 1px solid grey;
// }
// 选择器是变量时按官方文档说是可以的,但是 border 没渲染到 .varwrapper
@varclass: varwrapper;
@{varclass}:extend(.varextend){

}
.varextend{
  border: 2px solid blueviolet;
}
// .@{varclass}{
//   border: 2px solid blueviolet;
// }


// 官方文档的写法 把选择器直接给了变量
// @variable: .bucket;
// .bucket {
//   color: blue;
// }
// @{variable}:extend(.bucket) {}
// @variable: .selector;

// previous less compiles into:

// .bucket, .selector {
//   color: blue;
// }
//问题结束///

// 重复定义时,哪个是最后定义的使用哪个
.varwrapper:extend(.setcolor){
  color: red;
}
.setcolor{
  color: green;
}