将变量名作为变量传递到lighten函数中不起作用

Question

这样做是可行的：

background-color: ~"@{@{space-name}-color-4}";

这并不意味着：

background-color:lighten(~"@{@{space-name}-color-4}",5%);

错误：

SyntaxError:错误评估函数lighten：Object #中没有方法'toHSL‘。

已经核对过的问题和这个问题似乎是相似的：

在较少的操作中使用变量定义变量名

不幸的是，当我使用：

@color4:~"@{@{space-name}-color-4}";
border: 1px solid @color4; // this works
background-color:lighten(#ffffff,5%); // this works
background-color:lighten(@color4,5%); // this doesn't
background-color:lighten(@@color4,5%); // this doesn't - throws 'SyntaxError: variable @@{my-color-4} is undefined in..' although it is defined as @my-color-4 previously. Somehow double @ seems to fail
background-color:lighten(color(@color4),5%); // this doesn't

似乎与https://github.com/less/less.js/issues/1458有关，但我无法像前面提到的那样找到解决办法。

我做错了什么？

Answer 1

设置类似这样的混合器：

@space-name: space;
@space-color-4: #123456;
@color4:~'@{space-name}-color-4';

然后，在您的课堂上，它们可以如下所示：

.class {
  border: 5px solid @@color4; // this works
  background:lighten(@@color4,25%); // this also works
}

Codepen演示