少：使可变可变进变亮功能(Less: passing variable variable into

这工作：

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已经问题，这一次似乎是相似的：

在更短的操作定义具有可变的变量名

不幸的是这并没有为我工作，当我用：

@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演示

文章来源: Less: passing variable variable into lighten function