Define variable name with variable in LESS operation

Question

Can someone please explain why this code doesn\'t work:

@red-1:#ff0000;
@red-2:#990000;
@blue-1:#000ff;
@blue-2:#00099;

.setTheme(@theme){
  @color-1:~\"@{@         


        

Answer 1

It is a Bug

Color functions have an issue with respect to this that has been submitted.

Workaround

Don't try to do both calls in one string. Set the variable value to your inner variables. Then when you use them, use the @@ syntax directly. Like this:

@red-1:#ff0000;
@red-2:#990000;
@blue-1:#000ff;
@blue-2:#00099;

.setTheme(@theme){
  @color-1:~"@{theme}-1";
  @color-2:~"@{theme}-2"; 
  @color-2faded: fade(@@color-2, 10%);
  body.@{theme} .button{
    background:@@color-1;
    color:@color-2faded;
  }
}

.setTheme(~"red");

Or without the extra variable:

.setTheme(@theme){
  @color-1:~"@{theme}-1";
  @color-2:~"@{theme}-2"; 
  body.@{theme} .button{
    background:@@color-1;
    color: fade(@@color-2, 10%);
  }
}

Answer 2

You can also try the "color" function to convert a string to color

@color: '#ccc';
background: color(@color);

But yes, it didn't work on multi variables like your case. Resulted in #NaNNaNNaN