CSS Variable implementation guide on Hover with SASS Nested Styles in Chrome 118
I'm sure I'm missing something obvious here, but I'm working on a personal project and I'm working with an scenario where a CSS variable that I defined is not updating as expected when using SASS with nested styles......... I've defined a primary color variable and I want to change it on hover, but it seems like the variable retains its original value instead of updating. Here's what I have: ```scss :root { --primary-color: #3498db; } .button { background-color: var(--primary-color); color: #fff; padding: 10px 20px; border: none; border-radius: 5px; &:hover { --primary-color: #2ecc71; // Attempting to change the variable } } ``` In Chrome 118, when I hover over the button, it still shows the original blue background instead of changing to green. I've tried logging the value of `--primary-color` in the developer console, but it only shows the initial value. I also checked if there are any conflicting styles, but I don't see anything overriding it. Is there a specific way to manage CSS variables on hover when using SASS like this? Any insights would be appreciated! My development environment is Linux. I've been using Scss for about a year now. This is for a REST API running on Ubuntu 20.04. Hoping someone can shed some light on this.