CSS Variables Vs. SASS

Maybe a couple of years ago or so CSS variables started to gain honest traction in popularity. In all honesty, it does make sense for a lot of applications. When you take that, and add in the methods CSS exposes like calc(), min(), max(), etc. it’s safe to say CSS is a powerful language all on its own. That does bring one question though. What to do with SASS.

What Is SASS

To keep it short, SASS is a preprocessor language that compiles down to CSS to be read by the browser. It is very powerful and allows for a simplified approach to writing modular styling for your application.

In the past, before CSS variables gained traction, or were introduced for that matter, SASS introduced the features of CSS variables and methods before CSS proper. This was big for the community and propelled web styling architecture into the modern world we are happy for now.

How To Use CSS Variables

Using CSS variables is pretty straightforward and easy to maintain for the most part. To define a variable, you would need to use a prefix of two dashes ( -- ). As always with anything in programming, defining a variable comes with setting it to the appropriate scope.

In CSS, to define things at the global scope, you would define it in a :root style block. From there, all style definitions after it, at any scope level in the stylesheet, have access to what is defined there.

:root {
  --text-color: #000000;
}

body {
  color: var(--text-color, black);
}

.SubClass {
  --text-color: #FFFFFF;
  color: var(--text-color, white);
}

As you can see above, defining in the global sense is as easy as adding a style definition. You’ll also notice that inside the SubClass definition we redeclare the value for our text color variable. With this, we are saying globally we want the text color to be black. As far as the text residing in an element that has this class, they’ll end up using white.

Also, it’s good to make note of the second parameter inside the var method used to access our CSS variable. The second parameter is used as a fallback definition in case the variable we’re trying to access doesn’t have a value set. Pretty cool right!

How To Choose

CSS variables defiantly look cool, and a viable option for most projects. The same can be said for SASS as well. So this brings up the question of the article. How to choose an approach.

For the most part, like most things in tech, it all boils down to the complexity of your application. CSS variables are a great choice in projects with simple stylesheet complexity that would benefit greatly from having variables in its architecture.

For SASS, if the complexity of the project requires more in scalability, feature-rich functionality, and a more modular approach, then SASS is the better option.

In Closing

At the end of the day, everything is relative. In choosing the right technology for the project, 10 percent is knowing how to use it and the other 90 percent is figuring out how it would benefit the project you’re working on.