Question

我想将带有变量的mixin作为参数传递给另一个mixin并在那里使用这些变量（在另一个mixin中）。但看起来并没有看到这些变量。有任何想法吗？谢谢你：

// 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(); });
}

我有错误 变量@bg未定义

但这有效：

// Using mixin with vars
._btn4() {
  @bg: { background: #98b501; };
};
._btn() {
  ._btn4();
  @bg();
}
.button {
  ._btn();
}

Answer 1

目前＆＃34;分离的规则集＆＃34; （这通常用于@var: {};特征的代号）不被认为是mixin，因此它没有所有mixin属性和行为。包括将其内部定义的变量暴露给调用者范围的可能性。所以不，现在@vars();不会使@bg在._btn中显示出来。（目前正在讨论这种可能性，但尚未达成共识）。然而＆＃34;分离的规则集＆＃34; 将其内部定义的mixin暴露给调用者范围（事实上现在看起来很混乱:)所以如果你将bg更改为普通mixin，你可以实现同样的目的，例如：< / p>

@btn4: {
    .bg() {background: #98b501}
};

._btn(@vars) {
    @vars();
    .bg(); // OK
}

.button {
    ._btn(@btn4);
}

在某些情况下，将btn4保持为mixin并且仅在传递到另一个mixin时将其包装到分离的规则集中会更方便，例如：

.btn4() {
    .bg() {background: #98b501}
}

._btn(@vars) {
    @vars();
    .bg();
}

.button {
    ._btn({.btn4}); // wrap
}

在这种情况下，.btn4实际上变成了命名空间（因为它的parens是可选的并且可能被省略），这可能导致从长远来看更加坚实/有组织/可读的结构（也给出了可能性的奖励）直接致电.btn4.bg()（又名.btn4 > .bg()）。

LESS：将带有变量的规则集（或mixin）传递给另一个mixin并能够使用这些变量

1 个答案: