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

Question

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

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

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

使用 gulp-sass 构建我的 CSS，我收到此错误："required parameter $lightness is missing in call to function hsla on line {line number} in {file's path}"

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

Answer 1

这不是 SASS 的问题，该功能根本不存在。如果您查看 documentation, there are two versions of rgba(), one that accepts all of the parameters separately and one that accepts a 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";
  }
}

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

Using a Sass variable mapped to an hsl value doesn't work when trying to use it with hsla

css

hsl

sass

colors