2

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

Apurva Pathak
  • 692
  • 1
  • 9
  • 22
  • 3
    https://css-tricks.com/difference-between-types-of-css-variables/ – GomatoX Sep 11 '18 at 08:31
  • Been through that tutorial. What I concluded is to prefer custom properties over preprocessor for this case. Am I going right ? – Apurva Pathak Sep 11 '18 at 08:40
  • 1
    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 Sep 11 '18 at 08: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 Sep 12 '18 at 13:40

2 Answers2

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.

weirdpanda
  • 2,521
  • 1
  • 20
  • 31
  • 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). – GomatoX Sep 11 '18 at 08:34
  • Precisely. Honestly, if we had these inherently built into CSS, there would be no preprocessors but alas – weirdpanda Sep 11 '18 at 08:35
  • @GomatoX what do you mean to scope them (preprocessors cant do it) ? – sonic Apr 06 '19 at 20:29
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

JulienS
  • 181
  • 6