在 SCSS 中使用 HSLA 中的 CSS 变量答案

【问题标题】：Using CSS Variables in HSLA in SCSS在 SCSS 中使用 HSLA 中的 CSS 变量
【发布时间】：2018-07-30 08:01:36
【问题描述】：

所以我一直在尝试在 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 函数，它需要三个值；我得到的错误基本上是没有足够的论据。有没有人解决它？我尝试在整个函数周围使用字符串插值#{}，但没有奏效。

【问题讨论】：

标签： sass hsl css-variables

【解决方案1】：

嘿，我认为您在 SCSS 中想要做的是将整个函数视为一个字符串。这应该可以工作background: #{hsla(var(--color), 0.5)}，它会在 CSS 上输出为background: hsla(var(--color), 0.5);

【讨论】：