CSS变量和SCSS mixin

2023年12月2日 260次阅读

我需要能够使用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变量中仍未编译.它有什么办法吗？

谢谢！

最佳答案 CSS变量的“问题”是它们可以有任何价值 – 为什么map-getter($theme-dark,AppNav,hover)按原样呈现.要指示SCSS这是实际的SCSS代码而不是随机字符串,您需要使用插值(就像在calc中使用SCSS变量一样)：

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