Less 混合（mixin）

Less的混合：混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

.border {
   border: 1px solid red;
}

.box {
   width: 200px;
   height: 200px;

   .border;
}

编译成css后：

.border {
  border: 1px solid red;
}

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

有时候我们需要加一个宽度和高度,但宽度和高度有的是100px的有的是300px的这时候就可以加参数

.border(@width, @height) {
    width: @width;
    height: @height;
}

.box {
   .border(100px, 100px);
}

.main {
   .border(300px, 300px);
   border: 1px solid red;
}

编译成css

.box {
  width: 100px;
  height: 100px;
}


.main {
  width: 300px;
  height: 300px;
  border: 1px solid red;
}

还可以使用默认值：

.border(@ 100px, @height: 100px) {
    width: @width;
    height: @height;
}

.box {
   .border;
}

.main {
   .border(300px, 300px);
   border: 1px solid red;
}

编译成css

.box {
  width: 100px;
  height: 100px;
}

.main {
  width: 300px;
  height: 300px;
  border: 1px solid red;
}