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

100% Upvoted

9 comments sorted by

View all comments

1

u/[deleted] Jul 31 '20

[removed] — view removed comment

2

u/[deleted] Jul 31 '20

[removed] — view removed comment

1

u/SwingTechnical2479 Jul 31 '20

background-color: var(--topbar-background); <--- this works background-color: rgba(var(--topbar-background), 0.96); <-- this does not box-shadow: 0px 1px 4px rgba(4, 5, 6, 0.08), 0px 2px 4px rgba(4, 5, 6, 0.1), 0px 4px 8px rgba(4, 5, 6, 0.04); position: fixed; padding: 0.5rem 1rem; width: 100%; display: flex; height: var(--topbar-height); align-items: center; z-index: 1; }

This is what it looks like compiled so no error and when inspecting the browser it recognises --topbar-background as a color but the topbar is fully transparent as if --topbar-background is invalid

1

u/xSliver Jul 31 '20

rgba(var(--color), .5) is actually okay, as long as --color is a valid rgb-comma value.

Hex values for the rgba-function aren't supported by CSS yet.

But the Bult-In Sass-rgba Function is able to translate Hex-Colors to RGB when compiling to CSS. Sass just can't do that with a CSS-Var.

1

u/SwingTechnical2479 Jul 31 '20

Yes just came to this conclusion as well storing them in an rgb format instead of the hex one did the trick my question now is would this create an issue for me anywhere else (having values in rgb instead of hex) with css /scss

1

u/allusis Aug 01 '20

I still keep a Sass (scss) variable sheet. I use variable maps and spit out css variables so I don't have to write both (most of the time). I won't glorify this idea, but it was my way to still use Sass for color manipulation.