Converting Sass to CSS in 3 Easy Steps

Do you like using Sass but you think it is too much work to set it up for your project? I am glad to say that it is not!

CSS alone can be a lot of fun, but in larger and/or more complex projects stylesheets can become quite large and hard to maintain. When we face these types of situations, a preprocessor can be of help. Sass lets you use features that don’t exist in CSS yet like nesting, mixins, inheritance, and other nifty goodies that make writing CSS fun again.

CSS preprocessors allow us to write clean, organized, and reusable CSS. No doubt that Sass has become one of the most used and popular among the preprocessors out there.

It is easy to start a project and not to bother with setting up a CSS preprocessor. As the project starts to grow, we start to repeat ourselves and CSS files to grow along with it. The justification of jotting down regular CSS for simplicity and speed's sake starts losing its value.

Why not starting from day one with Sass? Check it out how with these 3 next steps:

1. Install node-sass

Node-sass is an awesome, fast, and reliable library which allows us to compile .scss files into .css.

If your project still doesn’t have a package.json file, go ahead and create one by running the following on your terminal:

npm init

Then install node-sass:

npm install --save-dev node-sass

2. Create npm scripts

In the scripts section of your package.json file, add the scss and scss-watch scripts.

3. Compile

In the previous step, we are assuming that your .scss files are in a folder called assets/scss and the destination for your CSS files will be assets/css (-o stands for output).

The first node-sass script (scss) is a one-time only operation. Whenever you need to compile you files just run npm run scss. Voilà! Your CSS files were generated.

The second node-sass script (scss-watch) is similar to the previous one with the only difference that it contains the optional flag --watch. This flag basically tells node-sass to keep watching changes occurring to your .scss files and re-compile them every time a change occurs. As you can tell, this comes very in handy when performing multiple updates.

That’s all folks. You are all set and ready to “Sassify” your style sheets.

I hope you guys enjoyed the quick read.