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

Stack Overflow用户

提问于 2020-04-24 06:25:06

回答 1查看 2.7K关注 0票数 5

我已经到处找过了，但似乎没有一个有效。

我正在处理Angular，并将我的scss变量放在根文件:root伪选择器中的styles.scss上。下面的代码在我的组件scss中工作；

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

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

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

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

我怎么才能绕过这个问题呢？

css-variables

sass

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-24 09:00:40

在你的风格变量文件中，包括十六进制和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>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61397995

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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