4 Reasons to Use SASS in Your Frontend Project
Why I recommend using SASS for your styling
SASS is a preprocessor or stylesheet language that is compiled into CSS by their own tooling or by module bundlers such as Webpack. It has a couple of functionalities that you can use to make your CSS neat and reusable such as variables, nested rulings, mixins, functions, and much more.
SASS is a great way to achieve more by doing less but in this age of component-driven frontend development, choosing the right tools for styling is simply not enough. Use tools like Bit (Github) to share your UI components to a collection (a modular and dynamic library). It will minimize time spent on re-writing code, optimize team collaboration and ensure a consistent UI, in and across different projects.
With that said, these points may convince you why you should include SASS into your project:
1. It makes nesting/grouping CSS selectors and architecting your stylesheet easier
SASS made it possible by taking care of nesting CSS classes or selectors inside of it and generate CSS under the hood. This is useful especially if you’re following the BEM Architecture as SASS is very compatible with its architecture and they mentioned it frequently in their docs so to speak.
It’s a neater, more elegant way of styling your UI. It’s also easier to architect your CSS with SASS. You would really love it if you’re a web designer or seasoned front-end web developer as your productivity skyrockets using it.
SASS also makes CSS neater and less clutter to code because you can do a lot of things to group your CSS code and nesting is no exception because SASS automatically does this for you.
These two functionalities will help you architect your CSS much better:
You can concatenate CSS selectors using ampersand(&)
Just imagine coding this in plain CSS if you’re using BEM Architecture:
As you might have noticed by now, typing the class.button a couple of times may be eating some unnecessary productivity time instead of focusing on grouping and styling the .button class effectively. I find this cumbersome and tedious to do especially when the CSS class or selectors I name were lengthy.
Now if you do this in SASS, this is how it looks like:
The above example shows how SASS can nest a couple of selectors by concatenating CSS selectors inside angled brackets({}) using ampersand(&). If you’re using BEM Architecture, you have saved a couple of time tediously typing CSS classes and selectors just to follow the architecture because SASS generates an appropriate CSS under the hood.
Comparing the two syntax both SASS and CSS, this is how they would look:
You can group parent-child selector using SASS
Another advantage of SASS is it also helps you group parent-child relationships in selectors/classes in just a few lines of code and grouped by brackets just like how you do selector concatenation with only a difference of adding an ampersand (&) instead.
Doing parent-child relationship goes like this in plain CSS:
This is how SASS tackles it:
Comparing it side-by-side, you can see a big difference between the two:
Just like selector concatenation, using SASS does the parent-child selector relationship for you through grouping them in angled brackets. And it’s much cleaner to do.
It improves your productivity
I used to be skeptical of using SASS into my workflow as I thought it was a waste of time to learn another subset of CSS, not to mention I used to ignore the latest tools being introduced in CSS such as learning flexbox. But as I tried to learn SASS the first time, my productivity went up and styling my components became effortless! How I wished I adopted this tool early on.
Grouping selectors and creating children from parent selectors were a breeze because SASS does the heavy lifting. I couldn’t say anything more of this but I could tell I was 2x faster than when I was using plain CSS for styling my components.
You can reuse CSS snippets to other selectors using Mixins
Not only that you can easily nest CSS selectors with less code but also reuse some code snippets that fix some CSS issues across your UI.
Mixins allow you to do just that. This way, you can avoid using non-semantic classes too much in your HTML elements.
Say, for instance, you have issues aligning UI to center and you don’t want a lot of redundant code to be coded in each CSS selectors. In this case, you can use mixins to do the trick.
Let’s show an example to demonstrate:
On the left side, we have the mixin absCenter and it’s included in our .sidebar selector. The generated CSS counterpart included the snippet that was inside the mixin.
SASS instantly recognizes mixins as reusable code and inject it onto the selectors/classes where you put them in.
You can define complex operations using Function Directives
Not only that you can reuse code by using mixins but also define your own functions for your complex computations! Functions give you the flexibility to
If you have some complex CSS that you may want to automate and reduce redundancies, you can make use of the power of custom-defined functions to do it for you.
Let’s go ahead and give you a demo:
Pretty nice, eh?
Conclusion
SASS is a great addition to your workflow as a Front-End Developer which I ignored for years and years in my career. Had I discovered and adopted it earlier, I might have loved styling in all these years of considering it to be a total nightmare.
