上一节我们学习了带参数的混合,作为函数混合时如何传入参数。在本节中,我们将学习混合函数,它可以支持嵌套、接受参数和返回值。Mixin作用域如果我们在一个mixin中定义了一个变量,那么这个变量只能在这个mixin或者引用这个mixin的区域中使用。但有一个例外,如果调用者包含一个同名变量,则该变量不会被复制到调用者的作用域中,只存在于调用者本地作用域中的变量受到保护,而那些从父作用域继承的变量将被覆盖。示例:.xkd(){@w:10px;@h:20px;}.p1{.xkd();@w:100px;宽度:@w;height:@h;}编译成CSS代码:.p1{width:100px;height:20px;}Mixins返回值我们可以在Mixins中定义变量,作为它的返回值。示例:.xkd(@a,@b){@width:@a+@b;}.good{.xkd(20px,30px);宽度:@宽度;}编译成CSS代码:.good{width:50px;}在上面的代码中,我们在mix.xkd中定义了一个变量@width,变量的值是两个参数之和。然后在.good中引用mixin.xkd,width属性值为@width变量的值。注意@width变量只能在引用了.xkd之后才能使用,否则会报错:.xkd(@a,@b){@width:@a+@b;}.good{width:@width;}编译时Error:returnMixins我们可以在Mixins中定义Mixins作为返回值。示例:.out(@num){.inner(){宽度:@num;}}.xkd{.out(100px);。内();}编译成CSS代码:.xkd{width:100px;}总结在Mixins中,无论是定义变量还是定义Mixins,都只对调用者可见。比如在一个Mixins中定义了一个变量,这个变量只能在引用了这个Mixins的样式类中使用,否则会报错。
