4 Reasons to Use SASS in Your Frontend Project

Why I recommend using SASS for your styling

Image by Christine Sponchia from Pixabay

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.

Example: searching for shared components in bit.dev

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:

CSS code following BEM(Block Element Modifier) 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: