CSS 变量和 SCSS 混合（mixin）

Question

我需要使用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变量中仍然未编译。有没有解决的办法呢？

谢谢！

- user7663281

Answer 1

CSS变量的“问题”在于它们可以有任何值——这就是为什么map-getter($theme-dark, AppNav, hover)会被原样呈现。为了告诉SCSS这是实际的SCSS代码而不是随机字符串，您需要使用插值（就像在calc中使用SCSS变量一样）。

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

- Jakob E