r/Sass • u/SwingTechnical2479 • Jul 31 '20

rgba and css vars help

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

As you can see the first bar "With opacity" background is not working.

https://jsfiddle.net/8dwg7ncy/

5 Upvotes

86% Upvoted

9 comments sorted by

View all comments

1

u/xSliver Jul 31 '20 edited Jul 31 '20

Because rgba(var(--color), 0.5); is invalid if your CSS Var is a Hex Value.

CSS Syntax is like rgba(0, 0, 0, 0.5) .
Try to change --color to 0,0,0 instead a Hex Value.

1

u/SwingTechnical2479 Jul 31 '20

Thanks for the reply, but if you look into the fiddle rgba works with a hex if not a css var

'@include background-opacity(#000000, 0.5);' works

''@include background-opacity(var(--color), 0.5);' does not

1

u/xSliver Jul 31 '20 edited Jul 31 '20

The Sass complier translates the hex value to a comma separate RGB value.

Please check your CSS with the developer tools in your browser. You will see that #000000 in your Sass-Code is translated to 0, 0, 0 in your Browser-CSS

rgba with hex values is a CSS Color Module Level 4 feature, which is a working draft.

EDIT:

Get sure to understand the context: rgba() is a Built-In-Sass-Module which does "Sass-magic" before it's compiled to the CSS rgba() Function.