mixin老生长谈了，vue中也有，就是将一些写好的内容/组合添加到另外一个样式中。

混合介绍

在Less中，你可以将类选择器 .class 或者 id选择器 #id 混入到其他选择器中，注意！只有 类 和 id 选择器可以混入！

混合使用

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类选择器（class）如下：

  1. .bordered {
  2.   border-top: dotted 1px black;
  3.   border-bottom: solid 2px black;
  4. }

如果我们希望在其它选择器中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

#menu a {
  color: #111;
  .bordered();  //使用小括号来代表引入这个类中的所有属性
}

.post a {
  color: red;
  .bordered();
}

.bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。（当然，你也可以使用 #ids 作为 mixin 使用。）

#demo {
  color: red;
}
a {
  #demo()  //使用id选择器混入
}

其他注意点

如果你不希望进行混入的类也显示在dom中，而是希望它只是一个混入类，那么你可以在定义这个选择器的时候在后面加上（），此时该选择器将不会被编译出来。

//一般的类选择器
.my {
  color: black;
}
//如果只是要混入，在后面带上小括号()的类/id选择器，不会被less编译成css代码
.my-mixin() {
  background: white;
}
.class {
  .my();
  .my-mixin();
}

编译为：

.my {
  color: black;
}
.class {
  color: black;
  background: white;
}

可以看到 .my-mixin 这个类并没有被编译出来。

混入守卫(守护)guard/传递参数

混入守护将允许使用混入的时候传递参数，但是一旦设置就必须传参，不可以不传参！
我们可以规定使用混入的选择器必须传入相应的参数才能使用混入，否则报错无法编译，这种方式就是守护（guard），就是说我们在混入的()内放入一个保镖，只有你传递参数才给放行。

使用方法

在定义混入类时候加了小括号()，就可以直接在括号中定义形参，则其他选择器在混入时必须传入相应的参数！：

//在小括号内定义守卫（也可以说是形参）
#mix(@color) {
    font-size: 15px;  //在样式中应用这个形参
    color: @color;
}

.mixin {
  #mix(red); //传递参数给@color，如果不传则无法编译，编辑器报错
}

编译为：

.mixin {
    font-size: 15px; 
    color: red;
}

如果没有传参则报错，没有找到匹配的参数，无法编译：
image.png

混入中的when()函数

其实这个并不算是函数，这是在混入时，用来给命名空间加上条件限制的，其语法和逻辑函数一摸一样，你甚至可以通过不同的判断，当传入的参数不同时混入不同的样式体：

对于mixin混入

你可以通过when将混入类进行类型判断，当传入参数不同时，可以实现不同的样式体：

.mixin(@value) when (ispixel(@value)) {width: @value}
.mixin(@value) when not(default())    {padding: (@value / 5)}

div-1 {
  .mixin(100px);
}

div-2 {
  /* ... */
  .mixin(100%);
}

编译为：

div-1 {
  width: 100px;
  padding: 20px;
}
div-2 {
  /* ... */
}

可以看到，虽然div-1和div-2混入了相同的类，但是由于他们的参数不同导致最后的样式内容也不同。