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

【问题标题】：LESS: passing ruleset (or mixin) with variables to another mixin and be able to use these variablesLESS：将带有变量的规则集（或 mixin）传递给另一个 mixin，并能够使用这些变量
【发布时间】：2014-12-10 17:57:20
【问题描述】：

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

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

【问题讨论】：

标签： variables namespaces less parameter-passing mixins

【解决方案1】：

目前，“分离规则集”（这通常用于 @var: {}; 功能的代号）不被视为混合，因此它不具有所有混合属性和行为。包括将其内部定义的变量暴露给调用者范围的可能性。所以不，现在@vars(); 不会使@bg 在._btn 中可见。（目前正在讨论允许这种可能性，但尚未达成共识）。但是“分离的规则集”确实将其内部定义的 mixins 暴露给调用者范围（实际上现在看起来很混乱 :) 所以如果你改变你也可以达到同样的效果bg 到一个普通的 mixin，例如：

@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()）直接）。

【讨论】：