Difference between custom properties in CSS and SCSS/SASS variable

Question

I was going through a really nice tutorial

https://www.sitepoint.com/variables-in-css-custom-properties/

I was trying to understand the concept of custom properties in CSS. But I am really confused as since SASS/SCSS variable also do the same thing. Then when custom properties. Or is there any significant way one should prefer CSS custom properties over preprocessors.

Thank you !! Any help much appreciated

Been through that tutorial. What I concluded is to prefer custom properties over preprocessor for this case. Am I going right ? — Apurva Pathak
– Apurva Pathak, Commented Sep 11, 2018 at 8:40
More or less yes. CSS properties are really new and are quite experimental so you might want to use it with browsers which support them. However, with preprocessors, you can be sure to get compatible CSS. A quirk which comes here is that preprocessors have a lot of overhead, so try looking at that as well. — weirdpanda
– weirdpanda, Commented Sep 11, 2018 at 8:47
@ApurvaPathak - in some scenario, I think it's too early now to use css variables, without any preprocessors (talking about postcss or something simillar). In near future there will be no reasons why to use preprocessors (personal opinion) :) — GomatoX
– GomatoX, Commented Sep 12, 2018 at 13:40

weirdpanda · Accepted Answer · 2018-09-11 08:30:32Z

2

The very simple answer is that CSS properties came long after preprocessors. One of the reasons why people preferred preprocessors was the fact that it was like a programming language with functions and variables instead of just static CSS.

With the addition of properties to vanilla CSS, you can use it without the need of any preprocessor; it's just an addition to the language.

With regards to when you should use it, the question should be: when should you use CSS preprocessors. It's when you need a lot of flexibility and a programming-language like environment. I hope this answers the question.

answered Sep 11, 2018 at 8:30

weirdpanda

2,6461 gold badge22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GomatoX Over a year ago

In addition: it's realy cool that there is possibility to scope them (preprocessors can't do that), like overriding only in some css rules (superb for theming or whitelabeling).

weirdpanda Over a year ago

Precisely. Honestly, if we had these inherently built into CSS, there would be no preprocessors but alas

sonic Over a year ago

@GomatoX what do you mean to scope them (preprocessors cant do it) ?

JulienS · Accepted Answer · 2018-09-11 08:36:38Z

1

The sass / scss is a code compiled for the css unlike the custom css which is a home-made variable to change the style of a page. But both methods contribute to the cascade. In my opinion, you have to look at browser compatibility and in which project context to use it

answered Sep 11, 2018 at 8:36

JulienS

1916 bronze badges

Collectives™ on Stack Overflow

Difference between custom properties in CSS and SCSS/SASS variable

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related