CSS Variables implementation guide in Media Queries with SASS Nested Styles
I tried several approaches but none seem to work... I tried several approaches but none seem to work. I'm working with an scenario where CSS custom properties (variables) defined in SASS are not updating correctly when I use them inside media queries. Specifically, I have a variable for the primary background color that I want to change based on screen size. Here’s a simplified version of my SASS file: ```scss $primary-color: blue; $secondary-color: green; body { background-color: var(--primary-color); } @media (max-width: 600px) { --primary-color: $secondary-color; } ``` Despite the media query, the background color remains blue on smaller screens. I've tried using `!default` for my variables, but that doesn't seem to impact the behavior. I also confirmed that my SASS is compiling correctly, as I can see the expected CSS output: ```css body { background-color: var(--primary-color); } @media (max-width: 600px) { --primary-color: green; } ``` When I inspect the element in Chrome's developer tools, the `--primary-color` variable shows up as 'blue' even when resizing the viewport. I've even tried adding `!important` to the background color in the media query, but it still doesn't update. Any idea what's going wrong here? Is there a best practice for using CSS variables in this way with SASS? I'm using Dart SASS v1.32.0 and testing on Chrome v94. I'm working on a web app that needs to handle this. Thanks in advance! My development environment is Ubuntu. How would you solve this?