css – LESS将规则集合并为两个不同的变量

我正在尝试将一个规则集合并到两个不同的规则集中,并且交换了变量值.主要目的是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中使用的最后一个值(在本例中为右).有没有办法如何交换变量或将其传递回mixin之外？

注意：我不想将LTR / RTL输出到两个单独的文件,我试图将它们组合成一个文件.

解决方法

要了解减少变量范围和生命周期,请参阅：

> Lazy Evaluation(又名Lazy Loading).
> Variable Semantics
> Most Misunderstood
> Scope
> Last Declaration Wins

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

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

原文地址：https://www.jb51.cc/css/217348.html