I'm facing a challenge involving the use of CSS variables in conjunction with my VueJs app. The goal is to make a hover effect (changing background-color) customizable by the application, while having a default value set in a nested SCSS map using the map-getter function.
Initially, I confirmed that the SCSS code works as intended with the following snippet:
.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
}
To implement CSS variables, I made modifications as shown below:
.theme--dark .AppNavTile:hover {
--hover-bg-color: red;
background-color: var(--hover-bg-color);
}
This successfully resulted in a red background when hovering over the element.
However, when attempting to combine both approaches, the outcome was unexpected:
.theme--dark .AppNavTile:hover {
--hover-bg-color: map-getter($theme-dark, AppNav, hover);
background-color: var(--hover-bg-color);
}
The browser's console output indicated that the SCSS code remained uncompiled within the CSS variable. Is there a workaround for this issue?
Thank you!