[SOLVED] Using CSS Variables in HSLA in SCSS

Using CSS Variables in HSLA in SCSS

So I have been trying to use CSS variables in HSLA. I need to keep the same color, but just change the opacity.

<div>
// content here
</div>

SCSS

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

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

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

So I thought I would be able to just keep the hsl color in there and change the opacity on hover or whatnot by using the variable. It works, if I'm just using plain CSS. But I am using SCSS and it's causing it to fail because SASS has it's own HSL function that's expecting three values; the error I get is basically not enough arguments. Has anyone gotten a way around it? I tried using string interpolation #{} around the whole function but it didn't work.

Solution

Hey I think what your want to do in SCSS is to treat the whole function as a string. This should work background: #{hsla(var(--color), 0.5)} that would output on CSS as background: hsla(var(--color), 0.5);