Sass 中 rgba(var(--color)) 无效的原因是什么？

golang学习网今天将给大家带来《Sass 中 rgba(var(--color)) 无效的原因是什么？》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

sass 中 rgba(var(--color)) 无效的原因

在 sass 中使用 rgba(var(--color)) 的时候，可能会遇到在元素上没有生效的情况。

问题原因：

正如问题的提示中提到的，最终编译成的 css 代码为 rgba(var(--color_theme, #409eff), 0.8)。但是，rgba 函数需要传入 10 进制的颜色值才能生效，而 var(--color_theme, #409eff) 返回的是 16 进制颜色值。

要解决此问题，需要将 var(--color_theme) 转换 10 进制颜色值，可以使用 rgb() 函数：

$themecolor: rgba(rgb(var(--color_theme, #409eff)), 0.8);

这样，编译后的 css 代码将为：

rgba(64, 158, 255, 0.8);

现在，rgba() 函数能够正确解析 10 进制颜色值，元素将呈现预期的透明度。

好了，本文到此结束，带大家了解了《Sass 中 rgba(var(--color)) 无效的原因是什么？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！