我需要使用CSS变量,因为我需要将hover效果(背景颜色)可由我的VueJs应用程序进行自定义。 但是,我的CSS样式表应该具有默认值,该默认值存储在嵌套的SCSS映射中。(map-getter是一个从嵌套映射中返回值的函数)
我知道我的SCSS代码有效,因为当我执行此操作时,我会得到预期的结果:
.theme--dark .AppNavTile:hover {
background-color: map-getter($theme-dark, AppNav, hover);
//returns background-color: rgba(255, 255, 255, 0.87); in my browser's console
}
为了使用CSS变量,我可以按照以下方式修改代码:
.theme--dark .AppNavTile:hover {
--hover-bg-color: red;
background-color: var(--hover-bg-color);
}
它运行良好,当悬停在元素上时,我有红色的背景。
然后我尝试将两者结合起来:
.theme--dark .AppNavTile:hover {
--hover-bg-color: map-getter($theme-dark, AppNav, hover);
background-color: var(--hover-bg-color);
}
根据我的浏览器控制台,这将返回以下内容:
.theme--dark .AppNavTile:hover {
--hover-bg-color: map-getter($theme-dark, AppNav, hover);
background-color: var(--hover-bg-color);
}
看起来SCSS代码在CSS变量中仍然未编译。有没有解决的办法呢?
谢谢!