less - 在 LESS 操作中用变量定义变量名

Question

有人可以解释为什么这段代码不起作用：

@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");

谢谢;

Answer 1

这是一个错误

已提交的颜色函数对此有问题。

解决方法

不要尝试在一个字符串中进行两个调用。将变量值设置为您的内部变量。然后当你使用它们时，@@直接使用语法。像这样：

@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");

或者没有额外的变量：

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

Answer 2

您也可以尝试“颜色”功能将字符串转换为颜色

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

但是，是的，它不适用于像您的情况这样的多变量。导致#NaNNaNNaN