在styles.scss 的:root 块中声明的CSS 变量无效 [英] Css variables declared in :root block in styles.scss are invalid

问题描述

在我的 angular 11 应用程序中，我尝试全局使用 css 变量来声明全局颜色.

In my angular 11 app I am trying to globally use css variables to declare global colors.

在我的 styles.scss 中，我有:

:root{
    --primary : #0b68e8;
    --secondary:#ABCFFF;
}
.test-class{
    background: var(--primary);
}

当我在我的一个组件中应用该类时，我可以看到 var 没有正确地从声明的变量中获取:

When I am applying that class in one of mine components I can see that var was not properly taken from declared variables:

我试图找到任何解决方案，但无法解决.你知道这里出了什么问题吗?

I tried to find any solution , but cant resolve it. Do you maybe know what is wrong here?

推荐答案

try

.test-class{
    background: #{var(--primary)};
}

顺便说一句，如果您使用 sccs，为什么不使用 sass 变量?

BTW, if you're using sccs, why not use sass variables?

$primary: #0b68e8;
.test-class{
    background: $primary;
}

这篇关于在styles.scss 的:root 块中声明的CSS 变量无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！