Как использовать rgba в s css как переменную css?

Question

В настоящее время у меня есть следующее использование dart sass ...

color: rgba(144, 202, 249, 0.5);

Я хотел бы сделать его переменной css, поэтому я попробовал это ...

--background-color: rgba(144, 202, 249, 0.5);
...
background-color: --background-color;

Но я получаю

Error: expected "{".
  ╷
1 │ --background-color: rgba(144, 202, 249, 0.5);

Я тоже пытался ...

--background-color: 144, 202, 249;
--opacity: 0.5;
...
background-color: rgba(var(--background-color), var(--opacity));

Но все еще не играли в кости

Error: expected "{".
  ╷
1 │ --background-color: 144, 202, 249;

Answer 1

Убедитесь, что вы правильно определяете переменную в соответствующей области видимости. Ваш начальный цветовой синтаксис правильный. Также не забудьте указать цвет с помощью var(--name) (отсутствует в вашем первом фрагменте кода).

.root {
  --background-color: rgba(144, 202, 249, 0.5);
}

.example {
  height: 200px;
  width: 200px;
  background-color: var(--background-color);
}

<div class="root"><div class="example" /></div>