CSS变量和SCSS混合 [英] CSS variable & SCSS mixin

问题描述

我需要能够使用CSS变量，因为我需要具有悬停效果(背景色)才能由我的VueJs应用程序自定义. 但是我的CSS样式表应具有默认值，该默认值存储在嵌套的SCSS映射中. (map-getter是从嵌套地图返回值的函数)

I need to be able to use CSS variables because I need to have an hover effect (background-color) to be customizable by my VueJs app. But my CSS stylesheet should have a default value, which is stored in a nested SCSS map. (map-getter is a function which returns values from nested maps)

我知道我的SCSS代码可以正常工作，因为这样做可以得到预期的结果:

I know that my SCSS code works, because I get the intended result when I do this:

.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变量，我可以如下修改代码:

In order to use CSS variables, I can modify the code as follows:

.theme--dark .AppNavTile:hover {
  --hover-bg-color: red;
  background-color: var(--hover-bg-color);
}

工作正常，将元素悬停时背景为红色.

It works fine and I have a red background when hovering the element.

然后我尝试将两者结合在一起:

Then I try to combine both:

.theme--dark .AppNavTile:hover {
  --hover-bg-color: map-getter($theme-dark, AppNav, hover);
  background-color: var(--hover-bg-color);
}

根据浏览器的控制台，这将返回以下内容:

According to by browser's console, this returns the following:

.theme--dark .AppNavTile:hover {
    --hover-bg-color: map-getter($theme-dark, AppNav, hover);
    background-color: var(--hover-bg-color);
}

因此，似乎SCSS代码仍未在CSS变量中进行编译.有什么办法解决吗?

So it seems that the SCSS code remains uncompiled in the CSS variable. Is there any way around it?

谢谢！

推荐答案

带有CSS变量的问题"是它们可以具有任何值-为什么按原样呈现map-getter($ theme-dark，AppNav，hover).要指示SCSS这是实际的SCSS代码而不是随机字符串，您需要使用插值(例如，如果您在calc中使用SCSS变量):

The "problem" with CSS variables is they can have any value – why map-getter($theme-dark, AppNav, hover) is rendered as is. To instruct SCSS that this is actual SCSS code and not a random string you need to use interpolation (like if you use SCSS variables inside calc):

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

这篇关于CSS变量和SCSS混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！