如果颜色来自 CSS 自定义属性，如何更改 HSL 颜色的 alpha？

Question

我有一个编码为 CSS 自定义属性的 HSL 颜色列表，我想操纵它们的 alpha 通道。

我试过的：

:root {
  --color: hsl(25, 33%, 93%);
}

.test { box-shadow: ... hsla(var(--color), 1); }

在 Web 浏览器调试器中，检查

styles

选项卡，我观察到 CSS 规则有效，因为它没有被标记为无效。但是，切换到

computed

选项卡并展开

box-shadow

，显示计算结果为

none

。所以这个 CSS 语法看起来是正确的，但是浏览器（Chrome 112 和 Firefox 112）似乎没有渲染它。

如何将 alpha 通道添加到编码为 CSS 自定义属性的 HSL 颜色？

附言有这个凌乱的 SASS 解决方案，但我不想使用它，因为它需要太多样板文件。

Answer 1

是的，您可以使用 hsla 并从变量中删除括号。

:root {
  --green: 120, 100%, 50%;
}

.box {
  width: 100px;
  height: 100px;
  background: hsla(var(--green), 0.5)
}

<div class="box"></div>