Less学习（二）----混合（Mixins）

混合(Mixins)

1.为什么使用混合
一个选择器里设置的属性，你想用在另一个选择器里，以往只能复制一遍，而现在你可以使用混合。
2.如何使用
1）直接在选择器里加入另一个选择器即可（类选择器和id选择器都可以）
2）直接在选择器里加入另一个选择器并在其后面加上’()’,两个的效果一样
.container{
样式规则
}
.wrapper{
.container();
或者
.container;
}
3.不输出混合物(Not Outputting the Mixin)
定义一个规则A，在规则B里使用了规则A，但你并不想让规则A单独应用，只想让它在规则B里应用，那么你就可以在规则A的选择器后面加上 ‘()’
.case(){
样式规则 //在 .case 上并不应用样式规则
}
.box{
.case // .box 上会应用 .case 的样式规则
}
4.混合里的选择器(Selectors in Mixins)
//& 代表的是 .hoverDiv 的父类
.hoverDiv{
&:hover{
color: blue;
border: 1px double violet;
}
}
5.命名空间(Namespaces)
如果希望在一个选择器中混合属性，可以将多个id或类堆叠起来，为了避免和其他库冲突，尽量使用 id选择器下
.box{
.onediv{
样式规则
}
.twodiv{
样式规则
}
.threediv{
样式规则
}
}
.otherdiv{
//将 .box 下的 .onediv 的样式应用到 .otherdiv 上
.box > .onediv();//等价于 .box > .onediv
//将 .box 下的 .twodiv 的样式应用到 .otherdiv 上
.box .twodiv();//等价于 .box .twodiv
//将 .box 下的 .threediv 的样式应用到 .otherdiv 上
.box.threediv();//等价于 .box.threediv
}
6.守卫命名空间(Guarded Namespaces)
顾名思义，我的理解是对 命名空间加一个条件，当满足条件的时候才会执行
但目前在代码中实现不了，还未找到原因，emmmmmm,明明就是一模一样的写法

// 命名保护空间，不起作用，原因未找到
// #guarddiv when (@gu=hu){
//   .otherdiv() {
//     color:red;
//   }
// }
// #guarddiv{
//   .otherdiv() when (@gu=hu) { /* */
//   }
// }

7.关键字 !important
在调用后使用可以使这个混合的所有属性是级别最高的
.imp{
.importstyle() !important;
.container()
}
上述的代码里没有 ！important 时，因为覆盖 .imp 的样式是 .container 的样式，一旦在 .importstyle 后加上 !important ， .imp的样式就是用的 .importantstyle 的样式

lessmixins.vue的代码如下：

<template>
  <div class="lessmixins">
    <div class="container">
      这是container
    </div>
    <div class="wrapper">
      这是wrapper
    </div>
    <div class="case">
      这是case
    </div>
    <div class="box">
      <div class="onediv">one</div>
      <div class="twodiv">two</div>
      <div class="threediv">three</div>
    </div>
    <div class="otherdiv">otherdiv</div>
    <div class="hoverDiv">
      这是hoverDiv
    </div>
    <div id="guarddiv">
      这是guarddiv
    </div>
    <div class="imp">
      这是important
    </div>

  </div>
</template>
<script>
export default {
  data(){
    return{

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

lessmixins.less文件代码如下：

@gu:hu;
@width: 300px;
@font-color: rgb(255, 0, 0);
.container{
  color: @font-color;
  width: @width;
  height: @width;
  border: 2px solid #ccc;
  margin: 0 auto;
}
.wrapper{
  // 直接使用 .container 的规则
  .container;// 等价于 .container();
  // margin-top 会覆盖 .container 里的 margin-top
  margin-top: 40px;

}
// 设置了 .case 的规则，但不想让其在 .case 上应用，可以在选择器后面加上 '()'，
//这不影响它被其他的规则调用
.case(){
  border: 1px dotted lightcoral;
  width: @width;
  height: @width;
  margin: 0 auto;
}
// 命名空间 Namespaces
.box{
  // .case的样式规则依然可以应用到 .box 上
  .case;
  .onediv{
    color: @font-color;
  }
  .twodiv{
    background-color: lightblue;
  }
  .threediv{
    border: 1px dotted darkblue;
  }
}
.otherdiv{
    margin-bottom: @width/5;
    // 命名空间 Namespaces
    //这三种方式都可以
    .box > .onediv();//等价于 .box > .onediv
    .box .twodiv();//等价于 .box .twodiv
    .box.threediv();//等价于 .box.threediv
}
// & 表示该选择器的 父类
.hoverDiv{
  &:hover{
    color: blue;
    border: 1px double violet;
  }
}
// 命名保护空间，不起作用，原因未找到
// #guarddiv when (@gu=hu){
//   .otherdiv() {
//     color:red;
//   }
// }
// #guarddiv{
//   .otherdiv() when (@gu=hu) { /* */
//   }
// }

// ！important
.importstyle(){
  color: green;
  width: @width/2;
  height: @width;
  border: 2px solid blueviolet;
  margin: 0 auto;
}
// .importstyle 后加了 ！important ，因此 .imp 的样式是 .importstyle 的样式规则
.imp{
  .importstyle() !important;
  .container();
}

浏览器运行结果：