Combine hexadecimal CSS Variables with alpha values

Question

Do you know any possibility to combine a heaxadecimal css variable with an alpha value to create a simple "shine through effect"?

e.g. as css variable: --my-color-red: #ff0000;

Now we want in our scss implementation to add this alpha value as a background and following code snippet doesn't work:

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

Without a css variable it works:

background: rgba(#ff0000, 0.5);

I think maybe the problem is that sass do the rgba implementation at compile time and the css variable is added at runtime afterwards.

Do you know any solution to solve this problem?

Does this answer your question? [Sass - Converting Hex to RGBa for background opacity](https://stackoverflow.com/questions/10929458/sass-converting-hex-to-rgba-for-background-opacity) — Peter B, Nov 11 '20 at 17:11

Daniel_Knights · Answer 1 · 2020-11-11T16:47:03.460

0

You could use a Sass function which converts hexadecimal to RGB:

@function hexToRGB($hex) {
    @return red($hex), green($hex), blue($hex);
}

Then store another version of your CSS variable as RGB:

--my-color-red: #ff0000;
--my-color-red-rgb: #{hexToRGB(#ff0000)};

This will give you the RGB values which you can then tack the alpha value onto within the rgba function:

rgba(var(--my-color-red-rgb), 0.5)

Taken from this article.

edited Nov 11 '20 at 16:47

answered Nov 11 '20 at 16:41

Daniel_Knights

Of course creating another variable as css variable is an option. Your third code snippet only works as new css variable. – JV3 Nov 12 '20 at 08:07
The function works fine for me. This is the only way to do it. – Daniel_Knights Nov 12 '20 at 08:17
$color: var(--my-color-red) is not a color. – JV3 Nov 12 '20 at 10:52
Are you getting that error from passing a CSS variable to the function? You can only pass hexadecimal: `hexToRGB(#ff0000)` – Daniel_Knights Nov 12 '20 at 11:14
No, then it works fine, but I want to avoid multiple variables. My goal is to have only one color variable as css variable. – JV3 Nov 12 '20 at 12:06
This is the best you can do, unfortunately. – Daniel_Knights Nov 12 '20 at 12:15

1 Answers1