LESS darken() doesn't seem to work with variable resolved from interpolation

1
votes

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?

1
less
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
See stackoverflow.com/questions/28451425/…. - seven-phases-max
@seven-phases-max: dude, you are on this! Well spotted! - jonathan3692bf

1 Answers

-1
votes

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);
}