Less 不太暗（）不'；t似乎无法使用插值解析的变量

尽管

@color

已正确解析为

#3AD49E

，但以下代码未能编译。（多亏了。）

---

您知道如何使颜色变暗吗？

这是因为您必须在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);
}

之所以会出现这种情况，是因为您必须先在HSL空间中转换
@color
，然后再应用
变暗
功能。您应该这样写：
@color1:hsl（色调（@color）、饱和度（@color）、亮度（@color））但strangley它不会为生成的
@color
变量运行。如果将其替换为原始的
@succes color
one，则它将正常运行。我不知道这是一个错误还是一个限制看。@seven Phase max:哥们，你在这上面！好样的！
@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);
}