scss rgba and loading from css vars;

user_2505372 0
Viewed 1557

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/

sass css javascript
1 Answers

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.

user_139644410
Related