我正在尝试将一个规则集合并到两个不同的规则集中,并且交换了变量值.主要目的是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之外？
解决方法
要了解减少变量范围和生命周期,请参阅：
> Lazy Evaluation(又名Lazy Loading).
> Variable Semantics
> Most Misunderstood
> Scope
> Last Declaration Wins
针对您的特定案例的解决方案非常简单：
.directions(@styles) {
.ltr & {
@left: left;
@styles();
}
.rtl & {
@left: right;
@styles();
}
}
