上一节咱们学习了带参混合,当混合作为一个函数时是如何传入参数的。本节咱们来学习混合函数,混合能够反对嵌套,承受参数和返回值。
混合范畴
如果咱们在一个混合中定义了变量,那么这个变量只能在这个混合或者援用了这个混合的区域中应用。然而有一个例外,就是如果调用者蕴含一个具备雷同名称的变量,则该变量不会复制到调用者的作用域中,仅存在于调用者本地范畴内的变量受到爱护,而从父范畴继承的变量将会被笼罩。
示例:
.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
的款式类中,才可能应用这个变量,否则会导致报错。