Search code examples
csssassscss-lint

Difference between custom properties in CSS and SCSS/SASS variable

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

Solution

  • 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.