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

Question

这个有效：

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

这不是：

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

错误：

SyntaxError: error evaluating function lighten: Object # has no method 'toHSL' in ...

已经检查过关于 SO 的问题，这个问题似乎很相似：

Define variable name with variable in LESS operation

不幸的是，这对我不起作用，当我使用时：

@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 中它们可以按如下方式使用：

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

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

Passing a variable name as a variable into the lighten function doesn't work

css

less

Codepen demo