LESS variable self concatenation

Question

This

.a {
  @a: 1;
  @b: 2;
  @concat: @a;
  @concat: ~"@{concat}@{b}";
  margin: @concat;
}

gives an error.

Syntax error: too much recursion

However, this

.a {
  @a: 1;
  @b: 2;
  @concat: e(`(function (a, b) {
    var concat = "" + a;
    concat += b;
    return concat;
  })(@{a}, @{b})`);
  margin: @concat;
}

would work.

Is there a trick to concatenate a string with itself with LESS only (without concat1, concat2, etc variables)?

Note that the code above isn't a subject for simplification because it will use conditionals. The code has to generate

.optional-conditional-class1, .optional-conditional-class2, .optional-conditional-class3 {
....
}

in a similar loop fashion. That's why I want to form concatenated string with the list of classes.

Less is a declarative language so its variables can't be used to modify themselves. What task are you trying to solve (looks like [XY Problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem))? — seven-phases-max, May 22 '15 at 15:16
`if (aCondition) { concat += a }; if (bCondition) { concat += b };` That's simplified js pseudocode. It could be easily done with LESS, except... well, the recursion thing. — Estus Flask, May 22 '15 at 15:20
For you edit see for example http://stackoverflow.com/questions/25306437 (don't miss my comments there). In short: (currently) the best way to generate a selector list in Less is the [`extend`](http://lesscss.org/features/#extend-feature) feature and not some string-based manipulation. String-based selector generation is still possible (no self-concatenation is necessary actually) but not recommended due to many limitations (simply because selectors in Less are not strings therefor string-based selectors will break in many situations). — seven-phases-max, May 22 '15 at 16:10
Either way, if you could show some more code (in particular what is initial variable and what are those conditions) I guess I could give some examples on how to generate selector ist via string-based-concatenation *w/o* variable-self-concatenation). — seven-phases-max, May 22 '15 at 16:14
Thanks, you're very helpful, there are not so many LESS guys here. `extend` doesn't seem to fit well into that recursive loop that Bootstrap uses (and I'm not too fond of doing `when` for conditionals with each iteration). I guess I will revise the approach and come up with another question if anything. — Estus Flask, May 22 '15 at 17:18
>extend doesn't seem to fit well into that recursive loop that Bootstrap uses - see my last comment in that thread - I wrote a whole sort-of blog-post on how to rewrite that Bootstrap code using `extend`. — seven-phases-max, May 22 '15 at 17:47
Yes, I'm checking your less.curious repo, it's great, thanks again for the tip. — Estus Flask, May 22 '15 at 17:51

Estus Flask · Accepted Answer · 2015-05-22T19:29:10.757

1

Yes, essentially, it is possible, though not on the same scope. I've ended up with recursive approach like this

    .concat-test {
      .concat(@rest...) {
        ._concat(@i, @result, @rest...) {
          @var: extract(@rest, @i);
          .-() when (@i > length(@rest)) {
            @concat: @result;
          }
          .-() when (default()) {
            ._concat(@i+1, ~"@{result}@{var}", @rest);
          }
          .-();
        }
        ._concat(1, "", @rest);
      }

      @a:a;
      @b:b;
      @c:c;

      .concat(@a, @b, @c, @b, @a);
      concat: @concat;
    }

edited May 22 '15 at 19:29

answered May 22 '15 at 19:17

Estus Flask

206,104
70
425
565

Which is basically what [`less-plugin-lists:join`](https://github.com/seven-phases-max/less-plugin-lists/blob/master/docs/ref.md#join) (see also `cat`) does in one line... ;) – seven-phases-max May 22 '15 at 20:11
@seven-phases-max Thanks! Too bad I had no chance to stumble on it when googling 'less css functions lib'. I will take a look at your other repos. I've already done it with `e(\`(function () { return Array.prototype.slice.call(arguments).join(", ") })(@{a}, @{b})\`)` but wanted to recreate it with LESS only. – Estus Flask May 22 '15 at 21:06

LESS variable self concatenation

1 Answers1