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

Question

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

我正在研究 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);

我该如何解决这个问题？

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>