使用映射到hsl值的Sass变量在尝试与hsla一起使用时不起作用

Question

我有一个Sass变量映射到hsl值。当我尝试与hsla一起使用时添加一点透明度，不起作用。我这样做：

$white:hsl(100, 100%, 100%);

.thing{
 color:hsla($white,.9);
}

使用gulp-sass构建我的CSS，我收到此错误：“{file's path}中{line number}上的函数hsla调用中缺少必需参数$ lightness”

如果我将hsla替换为rgba它可以正常工作，是的，我可以这样做，但我想将所有颜色保留在hsl中。有解决方法还是Sass问题？

Answer 1

这不是SASS的问题，功能根本不存在。如果查看documentation，则有两个版本的rgba（），一个单独接受所有参数，另一个接受Color对象。

rgba($red, $green, $blue, $alpha)
rgba($color, $alpha)

如果查看hsla（）的文档，它只会单独接受这些值。

hsla($hue, $saturation, $lightness, $alpha)

要实现目标，您可以这样做：

$white:hsl(100, 100%, 100%);

.thing{
 color: hsla(hue($white), saturation($white), lightness($white), .9);
}

或者......如果你想传递Color对象，你可以创建自己的函数can't overload functions;例如hslac($color, $alpha)

@function hslac($color, $alpha) {
  @if(type-of($color) == "color") {
    @return hsla(hue($color), saturation($color), lightness($color), $alpha);
  }
  @else {
    @error "You didn't pass a color object";
  }
}