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?

Answer 1

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>