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

Question

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

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

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

使用 gulp-sass 构建我的 CSS，我得到这个错误:“在调用函数 hsla 时缺少必需的参数 $lightness 在 {file's path} 的第 {line number} 行”

如果我将 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);
}

或者...如果你想传递颜色对象，你可以创建自己的函数，因为你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";
  }
}