1

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
trainoasis
  • 6,419
  • 12
  • 51
  • 82
  • @@color4 method actually throws '...variable @@{my-color-4} is undefined...'. Variable is defined as: @my-color-4: darken(@my-color-1, 10%); – trainoasis Feb 11 '15 at 10:20
  • 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 Feb 11 '15 at 10:23

1 Answers1

3

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

Danield
  • 121,619
  • 37
  • 226
  • 255
  • Hah, I nested @{space-name} and then the whole thing again, should have left it as a string. Thank you very much. – trainoasis Feb 11 '15 at 10:39