上一节咱们学习了带参混合,当混合作为一个函数时是如何传入参数的。本节咱们来学习混合函数,混合能够反对嵌套,承受参数和返回值。

混合范畴

如果咱们在一个混合中定义了变量,那么这个变量只能在这个混合或者援用了这个混合的区域中应用。然而有一个例外,就是如果调用者蕴含一个具备雷同名称的变量,则该变量不会复制到调用者的作用域中,仅存在于调用者本地范畴内的变量受到爱护,而从父范畴继承的变量将会被笼罩。

示例:
.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 的款式类中,才可能应用这个变量,否则会导致报错。