如何在 scss 中使用 rgba 作为 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

确保在适当的 scope 中正确定义变量。 您的初始颜色语法是正确的。 还要确保使用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>