在LESS操作中使用变量定义变量名

有人能解释一下为什么这个代码不起作用吗

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

谢谢,

这是一只虫子 颜色函数在这方面存在问题

变通办法 不要试图在一个字符串中完成两个调用。将变量值设置为内部变量。然后在使用它们时，直接使用

@

语法。像这样：

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

这是一只虫子 颜色函数在这方面存在问题

变通办法 不要试图在一个字符串中完成两个调用。将变量值设置为内部变量。然后在使用它们时，直接使用

@

语法。像这样：

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

您还可以尝试使用“color”函数将字符串转换为颜色

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

但是，是的，它不能像你的案例那样处理多变量。 导致#NaNNaNNaN

您还可以尝试使用“颜色”函数将字符串转换为颜色

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

但是，是的，它不能像你的案例那样处理多变量。

---

导致#NaNNaNNaN

什么不起作用？编译器显示以下错误：

语法错误：错误求值函数

fade

：对象#没有方法“toHSL”。设置主题（~“red”）我希望CSS输出如下：
color:rgba（153,0,0,0.1）什么不起作用？编译器显示以下错误：
语法错误：错误评估函数
fade
：对象没有方法“toHSL”。setTheme（~“red”）我希望CSS输出如下：
color:rgba（153,0,0,0.1）