css - 尝试与hsla一起使用时，无法使用映射到hsl值的Sass变量

我有一个映射到hsl值的Sass变量。当我尝试将其与hsla结合使用以增加一些透明度时，此方法将不起作用。我正在这样做：

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

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

使用gulp-sass构建我的CSS，我收到此错误：“ {文件路径}的第{line number}行对函数hsla的调用中缺少必需的参数$ lightness”

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

最佳答案

这与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";
  }
}