LESS 将规则集组合成两个具有不同变量的规则集

Question

我正在尝试将一个规则集组合成两个不同的规则集，并交换变量值。主要目的是LTR/RTL国际化。

用法：

h1 {
  margin-top: 10px;
  .directions({
    margin-@{left}: 5px;
  });
}

预期输出：

h1 {
  margin-top: 10px;
}
.ltr h1 {
  margin-left: 5px;
}
.rtl h1 {
  margin-right: 5px;
}

我能够使用 Less 1.7 中的 Passing Rulesets to Mixins 函数获得一些结果

.directions(@rules) {
  @left: left;
  .ltr & { @rules(); }
  @left: right;
  .rtl & { @rules(); }
}

问题在于 @left 变量总是设置为 .directions() mixin 中使用的最后一个值（在这种情况下为right）。有什么方法可以交换变量或将其传回 mixin 之外？

注意：我不想将 LTR/RTL 输出到两个单独的文件中，我正在尝试将它们合并到一个文件中。

Answer 1

要了解更少的变量范围和生命周期，请参阅：

• Lazy Evaluation（又名延迟加载）。
• Variable Semantics
• Most Misunderstood
• Scope
• Last Declaration Wins

针对您的特定情况的解决方案很简单：

.directions(@styles) {
    .ltr & {
        @left: left;
        @styles();
    }
    .rtl & {
        @left: right;
        @styles();
    }
}