Append an argument to a variable in a LESS mixin

Question

Here's the code I have:

@color-level-1: #99FFDD;
@color-level-2: #4484F6;
@color-level-3: #E91E63;
@color-level-4: #E99D1E;
@color-level-5: #D51EE9;


.some-color(@i) {
  + .some-class-name {
    background-color: @color-level-@i;
  }
}

.another-class-name {
  .some-color(3);
}

What is trying to accomplish is getting this output when using the mixin:

.another-class-name + .some-class-name {
  background-color: #E91E63;
}

Unfortunately it does not work. What I am getting as an output is:

.another-class-name + .some-class-name {
  background-color:  3;
}

I've tried escaping, but it does not help as well. Does someone have an idea how to make it work?

I think you can put the colours in a list and then use it in the code http://lesscss.org/functions/#list-functions — Huangism, Jan 11 '18 at 17:39
Possible duplicate of [Defining Variable Variables using LESS CSS](https://stackoverflow.com/questions/11198221/defining-variable-variables-using-less-css) — chazsolo, Jan 11 '18 at 17:42
@chazsolo Thanks man, I've tried searching for near an hour, but I did not find this thread. It works! — MindPhuq, Jan 11 '18 at 18:30
The soluton is `@color-name: "color-level-@{i}"; background-color: @@color-name;` — 3rdthemagical, Jan 11 '18 at 23:35
@MindPhuq It would be nice if you wrote your solution. To not leave a question without an answer. — 3rdthemagical, Jan 12 '18 at 10:24
@3rdthemagical thanks for noting this. I've updated the thread with an answer. — MindPhuq, Jan 12 '18 at 12:00
Don't emulate arrays/lists with the ugly variable-name-string-concatenation-bla-bla-ba, this is just ridiculous. Less has [native lists support](https://stackoverflow.com/search?q=%5Bless%5D+arrays). — seven-phases-max, Jan 12 '18 at 14:18

score 0 · Accepted Answer · answered Jan 12 '18 at 12:00

There are two ways to do this. The first one is:

@color-level-1: #99FFDD;
@color-level-2: #4484F6;
@color-level-3: #E91E63;
@color-level-4: #E99D1E;
@color-level-5: #D51EE9;

.some-color(@i) {
  + .some-class-name {
    background-color: ~"@{color-level-@{i}}";
  }
}

.another-class-name {
  .some-color(3);
}

And the second is:

@color-level-1: #99FFDD;
@color-level-2: #4484F6;
@color-level-3: #E91E63;
@color-level-4: #E99D1E;
@color-level-5: #D51EE9;

.some-color(@i) {
  + .some-class-name {
    @color-name: "color-level-@{i}";
    background-color: @@color-name;
  }
}

.another-class-name {
  .some-color(3);
}

Both of these return:

.another-class-name + .some-class-name {
  background-color: #E91E63;
}

Append an argument to a variable in a LESS mixin

1 Answers1