LESS将规则集合成具有不同变量的两个 [英] LESS combine ruleset into two with different variables

问题描述

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

I'm trying to combine one ruleset into two different rulesets with variable values swapped. Main purpose is LTR/RTL internationalization.

用法：

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

预期输出：

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

我能够使用将规则集传递给Mixins 函数在Less 1.7中可用

I was able to get some results with the Passing Rulesets to Mixins function available in Less 1.7

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

问题是 @left 变量总是设置为在.directions（）mixin（ right ）中使用的最后一个值。有什么方法如何交换变量或将它传回到mixin之外？

The problem is that the @left variable is always set to the last value used in .directions() mixin (right in this case). Is there any way how to swap variable or pass it back outside of the mixin?

注意：我不想将LTR / RTL输出到两个单独的文件，

Note: I do not want to output LTR/RTL to two separate files, I'm trying to combine them into one file.

推荐答案

要理解Less变量范围和生命周期，请参阅：

To understand Less variables scope and life-time see:

• 延迟评估（aka Lazy Loading）。


• 变量语义


• Most Misunderstood


• 范围


• 最后宣言获胜

• Lazy Evaluation (aka Lazy Loading).
• Variable Semantics
• Most Misunderstood
• Scope
• Last Declaration Wins

具体情况如下：

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

这篇关于LESS将规则集合成具有不同变量的两个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！