作为函数混合
混合中定义的变量和混合是可见的,可以在调用者的作用域中使用,只有一个例外,那就是如果调用方包含一个具有相同名称的变量(其中包括由另一个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;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。