在SCSS中使用HSLA的CSS变量

Question

我一直在尝试在HSLA中使用CSS变量。 我需要保持相同的颜色，但只更改不透明度。

<div>
// content here
</div>

SCSS

:root {
  --color: 332, 61%, 78%;
}

div {
  background: hsla(var(--color), 0.5);
}

https://codepen.io/sammiepls/pen/zLpvXY

我原本以为只需要保留hsl颜色并使用变量来改变鼠标悬停时的不透明度等效果就可以了。如果只是使用纯CSS，这确实有效。但是我正在使用SCSS，它会导致失败，因为SASS有自己的HSL函数，该函数需要三个值；我收到的错误信息基本上是参数不足。有人找到解决方法吗？我尝试在整个函数周围使用字符串插值#{}，但没有成功。

- sammiepls

Answer 1

嘿，我想您在SCSS中想要做的是将整个函数视为字符串。这应该可以使用 background: #{hsla(var(--color), 0.5)} 来实现，它将输出CSS代码 background: hsla(var(--color), 0.5);

- bruhbruh

Answer 2

它确实有效了！（现在）

Here's your exact code running in the StackOverflow web snippet editor.

:root {
  --color: 332, 61%, 78%;
}

body {
  background: hsla(var(--color), 0.5);
}

可能之前无法正常工作是因为您使用了已被弃用的LibSass，即旧的转换器。但是如果您使用Dart Sass，那么就没问题了。 Hugo用户请注意： Hugo在安装Dart Sass时可能会遇到困难，因此默认使用LibSass。您可以在一些Hugo问题线程中查看您确切的问题。

- Merchako

---

据我所知，目前只有在同一文件中定义变量才能正常工作。如果变量是在另一个文件或组件中定义的，那么 SCSS 将无法检测到该变量，并仍然产生原始错误。 - Brett

即使您使用@use/@include/@import导入了其他文件，@Brett的问题仍然存在吗？ - Merchako

我没有尝试过使用@use/@include/@import，我猜SCSS会知道它。如果文件是单独添加到Web组件中（例如使用打包工具），那么SCSS不会知道它，并且仍然无法正常工作。 - Brett