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变量的“问题”是它们可以具有任何值-为什么按原样呈现map-getter（$ theme-dark，AppNav，hover）。要指示SCSS这是实际的SCSS代码而不是随机字符串，您需要使用插值（例如，如果您在calc中使用SCSS变量）：

SELECT count(*)
FROM supplier_addresses 
WHERE supplier_id IN (
   SELECT id
   FROM suppliers
   LIMIT 5)

CSS变量和SCSS混合

1 个答案: