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

1
votes

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.

What am I doing wrong?

1
cssless
@@color4 method actually throws '...variable @@{my-color-4} is undefined...'. Variable is defined as: @my-color-4: darken(@my-color-1, 10%); - trainoasis
Ok, what is the version of Less that you are using and what value does @my-color-1 have? The reason I am asking these questions because I am using 1.7.5 and with whatever values I use even border: 1px solid @color4 does not work. - Harry

1 Answers

3
votes

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