1

The following LESS code fails to compile, despite the fact that @color is correctly resolved to #3AD49E. (Thanks to Defining Variable Variables using LESS CSS .) 

@success-color: #3AD49E;
@darken-percent: 5%;

.make-colored-div(@name) {
  @color: ~'@{@{name}-color}';
  &.@{name} {
    background: @color;
    border-color: darken(@color, @darken-percent);
  }
}

button {
    .make-colored-div(success);
}

Any ideas how to get darken to work?

Community
  • 1
  • 1
jonathan3692bf
  • 1,398
  • 1
  • 12
  • 14
  • This happens because you must convert `@color` in HSL space, before applying it `darken` function. You should write this: `@color1: hsl(hue(@color), saturation(@color), lightness(@color));` but strangley it does not run for generated `@color` variable. If you replace it with original `@succes-color` one, it runs correctly. I don't know if its a bug or a limitation – Luca Detomi Feb 12 '15 at 13:42
  • 1
    See http://stackoverflow.com/questions/28451425/less-passing-variable-variable-into-lighten-function. – seven-phases-max Feb 12 '15 at 13:51
  • @seven-phases-max: dude, you are on this! Well spotted! – jonathan3692bf Feb 12 '15 at 14:16

1 Answers1

-1

This happens because you must convert @color in HSL space, before applying it darken function.

Key code should be:

@color1: hsl(hue(@color), saturation(@color), lightness(@color));

But it does not run as is. You need to pass through a @temp variable, in order to do a double (and intermediate) passage to obtain HSL conversion. Complete code follows:

@success-color: #3AD49E;
@darken-percent: 5%;

.make-colored-div(@name) {
  @color: ~'@{@{name}-color}';
  &.@{name} {
    @temp:~'@{name}-color';
    @final-color: hsl(hue(@@temp), saturation(@@temp), lightness(@@temp));
    background: @final-color;
    border-color: darken(@final-color, @darken-percent);
  }
}

button {
    .make-colored-div(success);
}
Luca Detomi
  • 5,564
  • 7
  • 52
  • 77