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

CSS variable not working within SCSS when I use var and rgba

我已经四处搜索了这个,但 none 似乎有效。

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

我该如何解决这个问题?

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

首先,要为 CSS 属性 定义颜色,它必须与 color type format.

相同

如果您使用 VSCode,使用 this extension 可以很容易地在不同的颜色类型之间切换。