当我使用 var 和 rgba 时，CSS 变量在 SCSS 中不起作用答案

【问题标题】：CSS variable not working within SCSS when I use var and rgba当我使用 var 和 rgba 时，CSS 变量在 SCSS 中不起作用
【发布时间】：2020-08-07 09:56:22
【问题描述】：

我已经四处寻找这个，但似乎没有一个工作。

我正在使用 Angular 并将我的 scss 变量放在根文件中，styles.scss 在 :root 伪选择器中。以下适用于我的组件 scss；

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

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

当我尝试使用 rgba 时，颜色消失了，即

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

我该如何解决这个问题？

【问题讨论】：

那么什么是-color-primary-green..？它真的是 rgb 吗？
我已编辑以反映相同
是的，这在 rgba 中不起作用.. 与 Angular 无关
我知道 Angular @MikeOne 没有任何关系，我问的原因基本上是想了解如何在全局范围内表示样式并将它们作为变量访问
这能回答你的问题吗？ How do I apply opacity to a CSS color variable?

标签： sass css-variables

【解决方案1】：

在您的样式变量文件中包含您的颜色的 hex 和 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>

【讨论】：