允许包装在mixin中定义的css块。
分离的规则集是一组CSS属性、嵌套规则集、媒体声明或者是存储在变量中的任何其他内容,我们可以将它包含在规则集中或其他结构中,并且所有属性都将复制到那里;我们还可以将它用作mixin参数,并将它作为其他任何变量传递。
// 声明分离的规则
@rule_set: { color: green; };
// 使用分离的规则集
.xkd {
@rule_set();
}
// 输出结果
.xkd{
color: green;
}
分离规则集之后调用的括号是必需的,调用@rule_set不起作用。
当我们想要定义一个mixin时,它非常有用,这个mixin可以抽象出媒体查询中的一段代码或者不受支持的浏览器类名;规则集可以传递给mixin,这样mixin可以包装内容。
分离的规则集可以使用在定义和调用位置都可访问的所有变量和混合,否则定义和调用方作用域都可用,如果两个作用域包含相同的变量或混合,则需要声明作用域值优先。
声明范围是定义独立规则集主体的范围,将分离的规则集从一个变量复制到另一个变量无法修改其范围,仅在其中引用该规则集就无法访问新范围,分离的规则集可以通过被解锁(导入)到作用域中来访问。
定义和调用范围可见性:变量和mixin在分离的规则集中定义。
// 分离的规则集可以看到调用方的变量和混合宏
@rule_set: {
// 变量未定义
define-variable: @define-variable;
// mixin未定义
.define-mixin();
};
selector {
// 使用分离的规则集
@rule_set();
// 定义分离规则集中所需的变量和mixin
@define-variable: value;
.define-mixin() {
variable: declaration;
}
}
// 输出结果
selector {
define-variable: value;
variable: declaration;
}
引用将不会修改分离的规则集范围:仅仅给出引用,规则集不访问任何新的范围。
// 规则集不能仅在其中引用而获得对新作用域的访问
@rule_set1: { scope-detached: @one @two; };
.one {
@one: visible;
.two {
// 复制/重命名规则集
@rule_set2: @rule_set1;
// 规则集无法看到此变量
@two: visible;
}
}
.use-place {
.one > .two();
@rule_set2();
}
// 引发错误
ERROR 1:32 The variable "@one" was not declared.
解锁将修改分离的规则集范围:分离的规则集可以通过导入到范围中来访问。
// 分离的规则集通过在范围内解锁(导入)来获得访问权限
#space {
.unlock_1() {
//定义分离的规则集
@detached: { scope-detached: @variable; };
}
}
.unlock_2() {
// 解除锁定的分离规则集可以看到此变量
@variable: value;
// 解锁/导入分离的规则集
#space > .unlock-1();
}
.use-place {
// 第二次解锁/导入分离的规则集
.unlock-2();
@detached();
}
// 输出结果
.use-place {
scope-detached: value;
}
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
混合中定义的变量和混合是可见的,可以在调用者的作用域中使用,只有一个例外,那就是如果调用方包含一个具有相同名称的变量(其中包括由另一个mixin调用定义的变量),则不会复制变量,仅存在于调用者本地范围内的变量受到保护
当我们想在表达式上进行匹配简单的值或者是参数数量时,我们可以使用Guards;它与mixin声明相关联,并包括附加到mixin的条件。每个mixin将有一个或多个由逗号分隔的防护,并且guard必须括在括号中
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!