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 defa

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