Define variable name with variable in LESS operation

问题

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:~"@{@{theme}-1}";
  @color-2:fade(~"@{@{theme}-2}", 10%); //doesn't work
  body.@{theme} .button{
    background:@color-1;
    color:@color-2;
  }
}

.setTheme(~"red");

Thanks;

回答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%);
  }
}

回答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

来源：https://stackoverflow.com/questions/19098037/define-variable-name-with-variable-in-less-operation