LESS darken() 似乎不适用于从插值解析的变量答案

【问题标题】：LESS darken() doesn't seem to work with variable resolved from interpolationLESS darken() 似乎不适用于从插值解析的变量
【发布时间】：2015-02-12 13:19:43
【问题描述】：

尽管@color 已正确解析为#3AD49E，但以下LESS 代码无法编译。（感谢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);
}

任何想法如何变暗工作？

【问题讨论】：

发生这种情况是因为您必须在应用 darken 函数之前在 HSL 空间中转换 @color。你应该这样写：@color1: hsl(hue(@color), saturation(@color), lightness(@color)); 但它不会为生成的@color 变量运行。如果你用原来的@succes-color 替换它，它运行正常。不知道是bug还是限制
见stackoverflow.com/questions/28451425/…。
@seven-phases-max：伙计，你在这！很好看！

标签： less

【解决方案1】：

发生这种情况是因为在应用 darken 函数之前，您必须在 HSL 空间中转换 @color。

关键代码应该是：

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

但它并没有按原样运行。您需要通过一个@temp 变量，以便进行双重（和中间）通道以获得HSL 转换。完整代码如下：

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

【讨论】：