I'm used to keeping a variables.scss file for my colors, z-index values and other CSS stuff..
Now that we have variables natively in CSS, I’m interested in knowing how CSS Variables are different from SASS (or any preprocessor) variables.
Do CSS Variables have any advantage over SASS variables? and should I consider moving to native CSS variables at some point in future?
Mev-Rael
Executive Product Leader & Mentor for High-End Influencers and Brands @ mevrael.com
Native CSS variables are still badly supported. With SASS you also can use complicated formulas, however, native variables have some advantages:
Here are some examples what you can do just by changing CSS variable with JS - googlechrome.github.io/samples/css-custom-propert…
In future native variables will allow developers to separate CSS layout from themes. You will be able to re-use same CSS but with different variables to render something very different. Users, on the other hand, will be able to set their own layout and color themes. For now a lot of extra CSS/JS required for that.
Both native CSS variables and pre-processors are good together and definitely you will use CSS variables in the future.