LESS:将带有变量的规则集(或 mixin)传递给另一个 mixin，并能够使用这些变量

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

目前，"分离的规则集"(通常用于该@var: {};功能的代号(不被视为 mixin，因此它不具有所有 mixin 属性和行为。包括将其内部定义的变量公开给调用方范围的可能性。所以不，到目前为止，@vars();并没有使@bg在._btn中可见。(关于这种可能性的讨论正在进行中，但尚未达成共识(。然而，"分离的规则集">确实将其内部定义的混合暴露给调用方范围(事实上，现在看起来很混乱:)因此，如果您将bg更改为普通混合蛋白，则可以达到相同的效果，例如：

@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实际上变成了一个命名空间(因为它的括号是可选的，可能被省略了(，从长远来看，这可能会导致更坚实/有组织/可读的结构(也提供了直接调用.btn4.bg()(又名.btn4 > .bg()(的可能性(。