混合中定义的变量和混合是可见的,可以在调用者的作用域中使用,只有一个例外,那就是如果调用方包含一个具有相同名称的变量(其中包括由另一个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;
}
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
分离的规则集是一组CSS属性、嵌套规则集、媒体声明或者是存储在变量中的任何其他内容,我们可以将它包含在规则集中或其他结构中,并且所有属性都将复制到那里;我们还可以将它用作mixin参数,并将它作为其他任何变量传递
当我们想在表达式上进行匹配简单的值或者是参数数量时,我们可以使用Guards;它与mixin声明相关联,并包括附加到mixin的条件。每个mixin将有一个或多个由逗号分隔的防护,并且guard必须括在括号中
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!