CSS 变量和 SCSS 混合

Question

我需要能够使用 CSS 变量，因为我需要有一个悬停效果（背景颜色）才能由我的 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 变量中仍未编译。有什么办法可以解决吗？

谢谢！

Answer 1

CSS 变量的“问题”是它们可以具有任何值 \xe2\x80\x93 为什么 map-getter($theme-dark, AppNav, hide) 按原样渲染。要指示 SCSS 这是实际的 SCSS 代码而不是随机字符串，您需要使用插值（就像在 calc 中使用 SCSS 变量一样）：

\n\n

--hover-bg-color: #{map-getter($theme-dark, AppNav, hover)};\n

\n