CODEWITHSUNDEEP
csslessright-to-left
Ludeks
Ludeks

Reputation: 510

LESS combine ruleset into two with different variables

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

Usage:

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

Expected output:

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

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(); }
}

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?

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

Upvotes: 1

Views: 451

Answers (1)

seven-phases-max
seven-phases-max

Reputation: 11820

To understand Less variables scope and life-time see:

The solution for your particular case is as simple as:

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

Upvotes: 4

Related Questions