DEV Community

Discussion on: Write CSS variables faster in SCSS

Collapse
 
jappe999 profile image
jappe999

Can you explain why you use css variables instead of scss variables? What are the benefits of using css variables over scss variables?

Collapse
 
iamschulz profile image
Daniel Schulz

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.

Collapse
 
meduzen profile image
Mehdi M.

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.

Collapse
 
jappe999 profile image
jappe999

Nice! Thanks!

Collapse
 
bgallagh3r profile image
Brian Gallagher

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.

Collapse
 
ahmedmusallam profile image
Ahmed Musallam

You should add this to the article as a section titled “but why?”

Thread Thread
 
meduzen profile image
Mehdi M.

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.

Thread Thread
 
ahmedmusallam profile image
Ahmed Musallam

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.

Thread Thread
 
meduzen profile image
Mehdi M.

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!