css переменная не работает в пределах s css, когда я использую var и rgba

Question

Я искал это, но, похоже, ни один из них не работает.

Я работаю над Angular и у меня есть переменные s css в файле root, styles.s css в the: root псевдоселектор. Следующее работает в моем компоненте scss:

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

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

Когда я пытаюсь использовать rgba, цвет исчезает, т.е.

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

Как я могу go вокруг этого?

Answer 1

В вашем файле переменных стиля есть и шестнадцатеричная, и rgba-версия ваших цветов. Затем вы можете использовать значение rgb, когда оно требуется.

: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>