CSS --variable for Sass colors

Question

I'm trying to use CSS variables --variable with some Sass function such as rgba or a color mix but I'm keeping getting the error:

"Error: $color: "var(--color)" is not a color for `rgba'"

This is my code:

--color: #{rgb(132, 200, 3)};
--rgba: #{rgba(var(--color), 0.5)};

.color {
  color: mix($white, var(--rgba), 50%);
}

Any tips on what I'm doing wrong?

Answer 1

Try This:

  --color: #{rgb(132, 200, 3)};
  --rgba: #{rgba(var(-red), 0.5)};

.color {
  color: mix($white, var(--rgba), 50%);
}

Hope this is helpful :)