Apologies for the clickbait-ness of the title. TL;DR — use SASS.
Now for those readers with attention spans extending over 2.3 seconds…
What is SASS?
Sass stands for “Syntactically awesome style sheets”. And it’s not wrong.
Sass is a package you can add to your project which allows you to structure your CSS more easily, cleanly and more understandably. It prevents accidental code leaks, headaches, decreased the number of lines AND gives you a hug each time you need to return to your code.
Now, to save time and make the article shorter (I’m also fairly certain that everyone uses React today even to render a barely dressed html page) I will be applying the package to a fresh React project, but SCSS can be used with pure JS projects as well.
Installing SASS
To add SASS support to your project, run
npm i node-sass saveor
yarn add node-sassand once the project is added, all of your CSS files can be renamed to file_name.scss. Don’t forget to rename the files in your imports as well.
On a low level, the package transpiles the SCSS code which you will see to plain CSS in a similar way Babel turns React into javascript — so your browser has an idea of what the hell you are trying to force it to do.
Applying SASS
Now that we’re set up and ready, here’s how you actually have fun.
For this example I will use the default CSS that was provided by create-react-app upon creating said react app.
What we can notice is that .App-something repeats 4 times in this stylesheet. This is where SCSS jumps in.
We can reduce the amount of code using the & to replace all the repetition, and nesting it within .App like this:
Now refresh the page. Notice anything breaking? Me neither.
The advantage isn’t very noticeable in terms of saving space, since we only sliced off the empty spaces between the class names. What we did is we contained all of the code related to the .App class in one place, spreading from lines 1 to 21, between the curly bois without indentation. Now whoever looks at the code (including yourself in a few hours) can immediately see that for all classNames in our project starting with .App- are defined here, with no chance of needling to look elsewhere unless you screwed up bad time and defined .App in another file for another component. Shame on you then.
What is great is that we can keep on nesting to get stupidly long classNames like .App-header-container-button-text-active. IMHO it is good practice to string classNames like that to make not only locating styling easier by going through the nested containers, but it makes the class as descriptive and explicit as possible.
The benefits of such a nested approach start to really shine once our app becomes bigger. Keeping track of all the styling names on all the pages becomes unsustainable and opens our app to a lot of potential human errors. With the SCSS approach our code becomes predictable, and we can add/remove things whenever we need and see all of the needed code in one place.
This .App example is a painfully obvious one. That’s the point of it. However depending on the project structure, we may and probably will repeat ourselves with class naming at some point, without understanding why the styling isn’t what we expect it to be.
Variables!
Sass also supports variables.
The first question you might ask is why does CSS needs variables?
Good question….. Moving on…
Just kidding. While CSS or even SASS aren’t known for their strong calculation capabilities, what variables allow us to do is have a consistent structure all over our project.
As an example, we can define our App’s color palette in one file and export it out into any stylesheet we need. Same goes for any styling element — gradients, animations, paddings, margins, etc. They can also be used for calculations as any numerical value.
The syntax looks something like this:
Variables become especially useful when you reuse the same value multiple times and if there is a possibility the value might need to be changed in the future.
Worth mentioning
A nifty trick I use a lot is minimising the unnecessary code to have a clearer view on what I’m working on by clicking the +/- buttons to the left in our IDE:
In a similar way we can string our selectors, to get all of the same benefits. As an example, let’s say we decided to add a :hover to our shiny elements. We can do the traditional way:
… or make it contained and pretty:
You get the idea.
The same approach makes extending classes, applying media and all other CSS’age a joy to code.
Conclusion
Stay SASSy. The package is a light (under 1 mb ), very popular (over 3 million weekly downloads) and well supported addition to your future project. I had to return to one of my previous web pages from some time ago that did not use SASS, and trying to navigate between .container, .content, .content .container and .content_container was a struggle that did not have to happen. I could’ve saved myself a headache and a few hours of technological debt had I learnt about SASS a few months earlier.
