Why CSS Variables are better than Sass?

From the above example, you can see 2 texts, i.e. Hello and Project, on the output page. They have different colors but on the coding page, I declared the same background color and text color for h2 and h3 tags in line no. 6 of style.css. So according to this, the output should be the same.

But in line no. 11–13 of the style.css I declared a different color for variable red. And in the index.html, the h2 tag is inside the item class. So, its h2 tag takes the locally declared color for red. And h1 tag takes the root variable for red.

We can’t do these runtime changes in Sass. They are static and can’t be changed at runtime. Adding the ability to change variables at runtime opens the door to things like dynamic application theming and has major results for responsive design and the potential to polyfill future CSS features.