scss rgba and loading from css vars;

Question

Here is a pen of what I am trying to achieve .

I am trying to load css var from js. it works great with the one exception the rgba () function

 this.window.document.querySelector(':root').style.setProperty('--color', '#000');

This works

.no-opacity{
  color: white;
  background: var(--color)
}

This does not

background: rgba(var(--color), 0.5);

In the pen I made it as a mixin but the results are the same.

As you can see the first bar "With opacity" background is not working. I am loading the css variable using css

https://jsfiddle.net/8dwg7ncy/

Answer 1

It's due to the fact that Sass doesn't understand and can't interpret CSS. CSS variables will be taken literal by Sass, the browser will finaly compile the CSS. Therefor rgba(var(--black), .5) instead of being compiled to rgba(0, 0, 0, .5) will be compiled to rgba(var(--black), .5), assuming you said --black: #000000; the browser will no render rgba(#000000, .5), which is not supported in CSS yet.

It's not your JS causing troubles, but Sass being Sass.