They are different things. Scss vars are compiled into values, CSS vars are properties (they're actually called custom properties), that can be changed in runtime, for example by us or by media queries. That gives you other options for theming.
CSS variables end up being used on the compiled CSS stylesheet. Having CSS variables instead of regular hardcoded values have two benefits:
like SCSS variables (or all other languages variables), it enforces consistencies;
you can’t redefine SCSS variables once it has been compiled, but CSS variables can be redefined and manipulated in both CSS and JS… and even be use for animations!
SCSS variables are intended to help you during your development process. At the end, there’s nothing wrong about sticking to SCSS variables. CSS variables are cool because they allow to do stuff in an easier way.
Recently, I drafted a before/after image comparison with the help of CSS variables. It’s only like 10 lines of JS.
Nowadays, the only good reason to not use CSS variables (apart from “I have to learn them”, I only did recently) is that legacy browsers (IE 11 and Opera Mini) doesn’t support them.
Thanks for the explanation. I was just about to ask the same question. I've been using SASS for years now and it didn't occur to me about the ability to change CSS variables on the fly, that does make sense now that you've explained it.
I've never had cause to use them so I wasn't entirely sure of the point of having to define them in CSS in the first place.
Lead Developer: Adobe Experience Manager.
Father of one.
Minnesota.
Occasionally write here: ahmedmusallam.com and there: https://blogs.perficientdigital.com/author/amusallam/
Thanks for the suggestion! It took me some times to know where to add it in order to not break the reading flow. I end up putting it in the first sentence as a link to the comment.
Lead Developer: Adobe Experience Manager.
Father of one.
Minnesota.
Occasionally write here: ahmedmusallam.com and there: https://blogs.perficientdigital.com/author/amusallam/
That works good. But i think your comment is specifically regarding favoring CSS variables over SCSS/pre-processed variables.
For me as a reader and someone that is not a css expert, I though “why the hell would you use css variables and make a wrapper around them when pre-processed variables are perfect”
But then I read this comment and it made sense. So I would probably add a section titled “why the heck would you use css variables in SCSS” and link the comment so the reader has context.
I see what you mean. I'll read again the whole stuff when I'll have some time and reconsider the place of the why explanation. Thanks for your feedback!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Can you explain why you use css variables instead of scss variables? What are the benefits of using css variables over scss variables?
They are different things. Scss vars are compiled into values, CSS vars are properties (they're actually called custom properties), that can be changed in runtime, for example by us or by media queries. That gives you other options for theming.
CSS variables end up being used on the compiled CSS stylesheet. Having CSS variables instead of regular hardcoded values have two benefits:
SCSS variables are intended to help you during your development process. At the end, there’s nothing wrong about sticking to SCSS variables. CSS variables are cool because they allow to do stuff in an easier way.
Recently, I drafted a before/after image comparison with the help of CSS variables. It’s only like 10 lines of JS.
Nowadays, the only good reason to not use CSS variables (apart from “I have to learn them”, I only did recently) is that legacy browsers (IE 11 and Opera Mini) doesn’t support them.
Nice! Thanks!
Thanks for the explanation. I was just about to ask the same question. I've been using SASS for years now and it didn't occur to me about the ability to change CSS variables on the fly, that does make sense now that you've explained it.
I've never had cause to use them so I wasn't entirely sure of the point of having to define them in CSS in the first place.
You should add this to the article as a section titled “but why?”
Thanks for the suggestion! It took me some times to know where to add it in order to not break the reading flow. I end up putting it in the first sentence as a link to the comment.
That works good. But i think your comment is specifically regarding favoring CSS variables over SCSS/pre-processed variables.
For me as a reader and someone that is not a css expert, I though “why the hell would you use css variables and make a wrapper around them when pre-processed variables are perfect”
But then I read this comment and it made sense. So I would probably add a section titled “why the heck would you use css variables in SCSS” and link the comment so the reader has context.
I see what you mean. I'll read again the whole stuff when I'll have some time and reconsider the place of the why explanation. Thanks for your feedback!