css 怎样获取变量的值

Question

.scss文件

:root{
    --custom-color: #ff0000;
}

.bg-color {
    background-color: rgba(var(--custom-color), .5); //无效果
    background-color: lighten(var(--custom-color), 10%); //报错
}

定义了一个颜色变量，然后想在CSS类中应用改变颜色的值(#ff0000)，在不依靠js或其它编程语言怎样可以实现？

Answer 1

我猜你说的是CSS的变量，而不是SASS的变量，可以看下 张鑫旭大佬的文章，一目了然

Answer 2

$color:#fff000
.root{

color:$color;

}
.chidren{

background-color: rgba($color,.5);

}

这样才对，sass中，声明变量是用$color

Answer 3

据我所知不行。rgba(var(--custom-color), .5) <=> rgba(#ff0000, .5)，然而 rgba 不能这么传值。