SASS is a great tool. It is a superset of CSS that has two dialects to choose from - SASS and SCSS. Using it makes your styles a lot more concise and less duplicated. But how does one use SASS in their next weekend hack?

I have written enough CSS (not much, but enough) by hand to know that at some point maintaining CSS gets repetitive, duplicated, and generally speaking, inconvenient. That is what got me thinking how much overhead introducing SASS adds. Turns out, it was easier than I have thought!

Since we are starting to mess with frontend development it is expected that Node.js has to be installed. Other than that, a following package.json file should get you going:

{
  "scripts": {
    "dev": "npm run sass-watch & npm run serve",
    "sass-build": "sass --no-source-map --style=compressed styles/main.scss:main.min.css",
    "sass-watch": "sass --watch --no-source-map --style=compressed styles/main.scss:main.min.css",
    "serve": "reload --browser"
  },
  "devDependencies": {
    "reload": "^3.2.0",
    "sass": "^1.49.9"
  }
}

This package.json has two minor assumptions:

1. styles/main.scss file is an entrypoint for SASS
2. main.min.css is a CSS stylesheet linked in your HTML

Once you have added this file to your project, don’t forget to run npm install to download the dependencies! After that, build the minified CSS stylesheet by simply running npm run sass-build. As easy as that!

However, doing that manually with every change is far from ideal. That is where --watch flag for sass comes in. Couple it with reload for hotreloading (duh!) static files in a browser, and all you have to do is run npm run dev. This command will have your SASS automatically built on change in addition to reloading webpage on change with reload.

I hope that you will find this useful and, if you haven’t done so yet, give SASS a go!