关于less: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 的款式类中，才可能应用这个变量，否则会导致报错。