Less: passing variable variable into lighten function

问题

This works:

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

This does not:

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

Error:

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

Checked questions on SO already and this one seems to be similar:

Define variable name with variable in LESS operation

Unfortunately this did not work for me, when I used:

@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

Seems to be something with https://github.com/less/less.js/issues/1458 but I am not able to make a workaround as mentioned.

Any suggestions? What am I doing wrong?

回答1:

Set up mixins something like this:

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

Then in your class they can be used as follows:

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

Codepen demo

来源：https://stackoverflow.com/questions/28451425/less-passing-variable-variable-into-lighten-function