CSS variable & SCSS mixin

Question

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)

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
}

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);
}

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

Thanks!

Answer 1

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)};