我想把混合变量作为参数传递给另一个混合变量,并在那里使用这些变量(在另一个混合变量中)。但是看起来更少的人看不到这些变量。有什么想法吗?谢谢:
// Using ruleset with vars
@btn4: {
@bg: { background: #98b501; };
};
._btn(@vars) {
@vars();
@bg();
}
.button {
._btn(@btn4);
}
// Using mixin with vars
._btn4() {
@bg: { background: #98b501; };
};
._btn(@vars) {
@vars();
@bg();
}
.button {
._btn({ @btn4(); });
}
I有错误:变量@bg是未定义的
,但这是可行的:
// Using mixin with vars
._btn4() {
@bg: { background: #98b501; };
};
._btn() {
._btn4();
@bg();
}
.button {
._btn();
}
发布于 2014-12-10 11:50:39
目前,“分离规则集”(通常用于该@var: {};
特性的代码)并不被认为是一个混合体,因此它没有所有的混合属性和行为。包括将其内部定义的变量公开给调用方作用域的可能性。因此,不,到目前为止,@vars();
还没有使@bg
在._btn
中可见。(目前正在讨论这一可能性,但尚未达成共识)。但是,“分离规则集”确实将其内部定义的混合公开给调用方作用域(实际上,这看起来在一起很混乱:),因此,如果将bg
更改为普通的混合器,则可以达到相同的目的,例如:
@btn4: {
.bg() {background: #98b501}
};
._btn(@vars) {
@vars();
.bg(); // OK
}
.button {
._btn(@btn4);
}
在某些情况下,将btn4
保持为mixin也更方便,并且只在传递到另一个混合器时将其包装到一个分离的规则集中,例如:
.btn4() {
.bg() {background: #98b501}
}
._btn(@vars) {
@vars();
.bg();
}
.button {
._btn({.btn4}); // wrap
}
在这种情况下,.btn4
实际上变成了一个名称空间(因为它的父类是可选的,而且可能被忽略了),这可能会导致长期而言更可靠的/有组织的/可读的结构(也会增加直接调用.btn4.bg()
(又名.btn4 > .bg()
)的可能性)。
https://stackoverflow.com/questions/27407741
复制相似问题