Less 混合函数

上一节我们学习了带参混合，当混合作为一个函数时是如何传入参数的。本节我们来学习混合函数，混合可以支持嵌套，接受参数和返回值。

混合范围

如果我们在一个混合中定义了变量，那么这个变量只能在这个混合或者引用了这个混合的区域中使用。但是有一个例外，就是如果调用者包含一个具有相同名称的变量，则该变量不会复制到调用者的作用域中，仅存在于调用者本地范围内的变量受到保护，而从父范围继承的变量将会被覆盖。

示例：

.xkd() {
  @w:  10px;
  @h:  20px;
}
.p1{
  .xkd();
  @w: 100px;
  width:  @w;
  height: @h;
}

编译成 CSS 代码：

.p1 {
  width: 100px;
  height: 20px;
}

Mixins 返回值

我们可以在 Mixins 中定义变量，并将作为它的返回值。

示例：

.xkd(@a, @b) {
  @width: @a + @b;
}

.good{
    .xkd(20px, 30px);  
    width: @width; 
}

编译成 CSS 代码：

.good {
  width: 50px;
}

上述代码中，我们在混合 .xkd 中定义了一个变量 @width，变量的值为两参数之和。然后在 .good 中引用了混合 .xkd，其中的 width 属性值为 @width 变量的值。

注意，只有在引用了 .xkd 后，才能使用 @width 变量，否则会报错：

.xkd(@a, @b) {
  @width: @a+@b;
}

.good{
    width: @width; 
}

编译时报错：

返回 Mixins

我们可以在 Mixins 中定义 Mixins，并且可以将之用作返回值。

示例：

.out(@num) {
  .inner(){
    width: @num;
  }
}

.xkd{
  .out(100px);  
  .inner(); 
}

编译成 CSS 代码：

.xkd {
  width: 100px;
}

总结

在 Mixins 中不管是定义变量还是定义 Mixins，都仅对调用者可见。例如在一个 Mixins 中定义了一个变量，只有在引用了这个 Mixins 的样式类中，才能够使用这个变量，否则会导致报错。