Native CSS Variables
I’ve been using Sass variables for quite a while, so I’m interested to see how native CSS variables (AKA CSS custom properties) compare to preprocessor variables.
Philip Walton does a great job of explaining the difference between native and preprocessor variables. He also outlines some potential uses in his post. I like that he calls out “CSS custom properties” as being the more accurate (and in my opinion, more intuitive) term …
CSS preprocessors are fantastic tools, but their variables are static and lexically scoped. Native CSS variables, on the other hand, are an entirely different kind of variable: they’re dynamic, and they’re scoped to the DOM. In fact, I think it’s confusing to call them variables at all. They’re actually CSS properties, which gives them an entirely different set of capabilities and allows them to solve an entirely different set of problems.
Pretty cool stuff—don’t miss the helpful CodePen demos he made to accompany the post. (1 & 2)