混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法

混合其实就是设置功能属性，把可复用的提取出来

第一种混合的使用方法

index.html

<div class="box"></div>
<div class="box2"></div>

index.less

.bordered {
  border: 1px solid #ccc;
}

.box{
  width: 200px;
  height: 200px;
  .bordered()
}

.box2{
  width: 100px;
  height: 100px;
  margin-top: 10px;
  .bordered()
}

 

 

 

混合可以使用选择器进行选择

index.html

 <div class="box">
    <div class="border"></div>
   </div>
   <div class="box2"></div>

index.less

.box{
  width: 200px;
  height: 200px;
  border: 1px solid #333;
  padding: 10px;
  .border {
      width: 100px;
      height: 100px;
      border: 1px solid #ccc;
  }
}

.box2{
  margin-top: 10px;
  .box .border()
}

.border类在.box中，如果.box2需要使用，此时就需要使用css的后代选择器进行选择；.box .bordered()就相当于选到了.box内部的.bordered

 

 

 后代选择器也可以这样写

.box .border() 
等价于
.box>.border()

混合第二种写法

index.html

<div class="box">
   </div>
   <div class="box2"></div>

index.less

.border() {
  width: 100px;
  height: 100px;
  border: 1px solid #eee;
}

.box {
.border;
}

.box2 {
.border;
}

.border()代表的就是定义一个函数，这种写法的最大好处就是谁调用，给谁添加代码，不会增加全局代码

 

 混合的属性或者函数可以加!important关键字的

.bordered() {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}

.box {
.bordered!important;
}

 

 混合也可以携带参数

.border(@width,@style,@color) {
  border: @width @style @color;
}

.box{
  width: 100px;
  height: 100px;
  .border(1px; solid; #ccc)
}

 

 

函数内部也有默认参数

.border(@width,@style,@color:orange) {
  border: @width @style @color;
}

.box{
  width: 200px;
  height: 200px;
  .border(1px; solid;)
}

 

 

函数内部的参数也是可以不按照顺序传的

.border(@width,@style,@color) {
  border: @width @style @color;
}

.box{
  width: 200px;
  height: 200px;
  .border(@color: #ccc; @width: 1px; @style: solid)
}

 

 .box内部调用.bordered时候是可以不按照顺序传递的，此时前面一定要加上赋值属性名

函数内部可以设定返回值

.mixin() {
  @bgc: skyblue;
}

.box {
  .mixin();
  width: 100px;
  height: 100px;
  background-color: @bgc;
}

 

 .mixin函数必须要先调用一次，.mixin函数就会释放内部的变量；然后再使用返回的变量，这样做的好处就是随拿随用，不会造成全局浪费；less在编译的时候，会自动处理，看代码中有没有用到，也可以减少全局污染；

函数内部的变量也可以进行传参和计算

.mixin(@width,@height) {
  @padding: ((@width + @height) * 2)
}

.box {
  .mixin(10px, 20px);
  width: 200px;
  height: 200px;
  padding-left: @padding;
  background-color: red;
}

 

 

函数还可以进行嵌套

.outerMixin(@value) {
  .innerMixin() {
    background-color: @value;
  }
}

.box {
  width: 200px;
  height: 200px;
  .outerMixin(red);
  .innerMixin()
}