今天小编跟大家讲解下有关mixin函数混合 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关mixin函数混合 的相关资料,希望小伙伴们看了有所帮助。
混合中定义的变量和混合是可见的,可以在调用者的作用域中使用,只有一个例外,那就是如果调用方包含一个具有相同名称的变量(其中包括由另一个mixin调用定义的变量),则不会复制变量,仅存在于调用者本地范围内的变量受到保护,而从父范围继承的变量将会被覆盖。
Mixin范围
由变量和混合组成的混合可以在调用者的作用域中使用,并且是可见的。
Mixin和返回值
mixin类似于函数,在mixin中定义的变量将作为它的返回值。
Mixin定义另一个mixin
每当一个mixin定义在另一个mixin中时,它可以用作返回值。
示例:
// 1:正常使用 .mixin(){ @color: green; @border: 1px solid red; @font-size: 24px; @width: 100px; @height: 200px; } .allvar_mixin{ .mixin(); color: @color; border: @border; font-size: @font-size; width: @width; height: @height; } // 输出结果 .allvar_mixin{ color: green; border: 1px solid red; font-size: 24px; width: 100px; height: 200px; } // 2:mixin中定义的变量用作返回值 .var_reval(@a, @b) { @var_reval: ((@a + @b) / 3); } div { .var_reval(15px, 30px); // 使用其返回值 margin: @var_reval; } // 输出结果 div { margin: 15px; } // 3:在调用者作用域中直接定义的变量不能被覆盖,但在调用者父作用域中定义的变量不受保护会被覆盖 .mixin() { @cover: action_scope; @notcover: action_scope; } .xkd { padding: @cover @notcover; .mixin(); } // 调用方父作用域没有保护 @cover: parent_scope; // 输出结果 .xkd { padding: action_scope action_scope; } // 4:定义的mixin充当返回值 // 外混合 .unlock(@value) { // 嵌套混合 .mix_reval() { declaration: @value; } } #namespace { // 解锁一些混合 .unlock(8); // 嵌套的mixin被复制到这里并可用 .mix_reval(); } // 输出结果 #namespace { declaration: 8; }来源:爱蒂网