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

设置这样的mixins：

@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
}

Less：将变量变量传递给lighten函数

1 个答案:

Codepen demo