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