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

Question

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

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

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

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

如果我用它替换它，hsla效果rgba很好，是的，我可以做到这一点，但我想将所有颜色保留在 hsl 中。有解决方法还是这是 Sass 问题？

Answer 1

这不是 SASS 的问题，该功能根本不存在。如果您查看文档，就会发现 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 对象，您可以创建自己的函数，因为您不能重载函数；例如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";
  }
}