较少将规则集合并为具有不同变量的两个

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（又名Lazy Loading）。
• Variable Semantics
• Most Misunderstood
• Scope
• Last Declaration Wins

针对您的特定案例的解决方案非常简单：

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