我需要能够使用 CSS 变量,因为我需要有悬停效果(背景颜色)才能由我的 VueJs 应用程序自定义。 但是我的 CSS 样式表应该有一个默认值,它存储在一个嵌套的 SCSS 映射中。 (map-getter 是一个从嵌套 map 返回值的函数)
我知道我的 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 变量中保持未编译状态。有什么解决办法吗?
谢谢!
最佳答案
CSS 变量的“问题”在于它们可以具有任何值——为什么 map-getter($theme-dark, AppNav, hover) 会按原样呈现。要指示 SCSS 这是实际的 SCSS 代码而不是随机字符串,您需要使用插值(就像您在 calc 中使用 SCSS 变量一样):
--hover-bg-color: #{map-getter($theme-dark, AppNav, hover)};
关于CSS 变量和 SCSS 混入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51018629/