Setting up SASS with Express

Over the last few months, I’ve been using and getting familiar with SASS at work. I had experienced some benefits of it earlier as well but not to the extent to which I did more recently.

There is absolutely no reason why anyone should use pure css anymore when things like SASS and LESS are around. They are much easier to write in and comprehend because of the nested structure. There are many other benefits (e.g. variables, imports, etc.), which I haven’t even fully explored, but I’m already switching over to SASS for my personal project (Skilldom.org).

So here’s how you set it up:

  • Start with exploring the node-sass package. This seems like the most popular package for SASS in the node world.
  • In your node project folder, simply type:
    npm install node-sass
  • In your app.js (or whatever your main node file is called), add this line right before the “static” configuration:
    app.use(sass.middleware({
    src: __dirname + '/sass',
    dest: __dirname + '/public',
    debug: true,
    outputStyle: 'compressed'
    }));
  • You can, of course, change the paths to point to wherever you want to store the SASS files and the compiled CSS files.
  • That’s it. Now you can reference any CSS file (stored in the /public/stylesheets folder) from any template and node-sass will dynamically compile the corresponding SCSS file (if it exists in the /sass/stylesheets folder) into that CSS file.

So, there you go. It’s that simple!