CSS variable not working within SCSS when I use var and rgba

Question

I have searched around for this but none seems to work.

I am working on Angular and have my scss variables on the root file, styles.scss in the :root pseudo-selector. The following works in my component scss;

    :root {--color-primary-green:#00e676}

    background-color:var(--color-primary-green);

When I try to use rgba, the color disappears i.e

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

How can I go around this?

I know there is nothing do with Angular @MikeOne, the reason I asked is basically to get views on how I can represent the styles on the global scope and access them as variables — Novak254, Apr 24 '20 at 00:14
Does this answer your question? [How do I apply opacity to a CSS color variable?](https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable) — Rafael Tavares, Jun 17 '21 at 12:35

score 5 · Accepted Answer · answered Apr 24 '20 at 01:00

In your style variables file include both the hex and rgba versions of your colours. Then you can use the rgb value when it is required.

:root {
  --color-primary: #2dd36f;
  --color-primary-rgb: 45, 211, 111;
}

.hex-bg {
  background-color: var(--color-primary);
}

.rgba-bg {
  background-color: rgba(var(--color-primary-rgb), 0.5);
}

div {
  padding: 8px;
  margin: 8px;
}

<div class="hex-bg">
  background with hex value
</div>

<div class="rgba-bg">
  background with rgba value
</div>

score -2 · Answer 2 · edited Jun 04 '22 at 13:48

-2

First, to define the color for a CSS property it must be the same color type format.

If you use VSCode it will be easy to switch between different color types with this extension.

edited Jun 04 '22 at 13:48

Zach Jensz

3,650
5
15
30

answered May 30 '22 at 15:45

Ahmed Korany

7
4

CSS variable not working within SCSS when I use var and rgba

2 Answers2