Using Node Sass

I’ve been using Ruby Compass to compile my SCSS code into CSS for a number of years.

I know I’m late to the party, but Visual Studio Code really saves my day. It comes with all the things developers need to make their lives easier. Among them, there is a Node Sass extension, the Ruby Compass-like tool to compile SCSS codes into CSS with tons of options.

In this node, I’m not going into details of what those options are. Instead, I’d like to note what I’ve done to make things work in case I need to redo it in the future. 😉

To install in Node Sass in the Visual Studio Code, go to Terminal and execute the following command:

sudo npm install -g sass

This will install Node Sass globally which means it will be accessible from every current and future project.

Go to one of your projects and locate the current sass folder and then run the following command to watch the change:

sass --watch sass:css --style=compressed

Or to compile specific SCSS files as CSS in the same folder:

sass --watch project.scss:project.css --style=compressed

Node Sass will compile your SCSS code in the sass folder and generate a copy, if needed, to the css folder. The compressed style will make sure your CSS compiled code will be compressed.