Dynamic Variable Names in LESS CSS

Question

I have been trying this for a while, looking at other answers, but to no avail. Hopefully someone can help me.

I am trying to generate some dynamic variable names within a mixin.

The variables are already defined:

@horizontal-default-color: #fff;
@horizontal-inverse-color: #000;

etc..

The mixin I want would be something like this:

.horizontal-variant(@variant) {
    color: @{horizontal-@{@variant}-color}
}

And the result I am expecting, when called:

.horizontal-default{
   .horizontal-variant(~"default");
}
.horizontal-inverse{
   .horizontal-variant(~"inverse");
}

is

.horizontal-default {color: #fff}
.horizontal-inverse {color: #000}

Unfortunately I run into errors every time.

I know this can be done, I have seen it being used in Font Awesome LESS where @{fa-css-prefix} is defined in variables. I am just having trouble transporting the same solution in my project.

You can try testing the code at http://lesstester.com/

Answer 1

You can use Variable Names. And I've tested the code at http://lesstester.com/, it works.

@horizontal-default-color: #fff;
@horizontal-inverse-color: #000;

.horizontal-variant(@variant) {
  @color: "horizontal-@{variant}-color";
  color: @@color;
}

.horizontal-default{
  .horizontal-variant(~"default");
}
.horizontal-inverse{
  .horizontal-variant(~"inverse");
}