In the frontend world, it’s common to talk about CSS preprocessors to get some extra tools and features that are not available with regular CSS. While there are several preprocessor options, according to recent GitHub statistics Sass is the most popular.
As a preprocessor, Sass has many features beyond the ability to use variables like in a programming language. But, the goal of this article is to specifically compare Sass variables with regular CSS variables. Is there any difference at all? Is one better than the other? Or at least, is there a technical difference between these two options?
The real difference
Even though Sass is more flexible in some things than regular CSS, there is something that needs to be pointed out about the use of variables: For the DOM and the CSSOM, the CSS custom properties exist, but Sass variables don’t.
The only downside to this approach is it does not work with discontinued or outdated browser versions that don’t support CSS custom properties.
A CSS preprocessor will give you more tools to work with than plain CSS. This is a fact, but to revisit the questions asked at the beginning of this article, it is safe to say that: Style-wise, both options are the same. The technical difference is that CSS custom properties will be visible for the DOM, Sass variables stop existing after the compiling process.
Interested in working with us? Have a look at our careers page and reach out to us if you would like to be a part of our team!