在SCSS的HSLA中使用CSS变量

时间:2018-07-30 08:01:36

标签: sass hsl css-variables

所以我一直在尝试在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函数,该函数期望三个值。我得到的错误基本上是没有足够的参数。有没有人解决它?我尝试在整个函数中使用字符串插值#{},但没有用。

1 个答案:

答案 0 :(得分:1)

嘿,我想您想在SCSS中做的就是将整个函数当作一个字符串来对待。 background: #{hsla(var(--color), 0.5)}应该可以正常工作,在CSS上以background: hsla(var(--color), 0.5);输出