Post

Setup Node SASS Watch

The easiest way to turn SCSS into CSS.

If your a frontend web developer, then CSS is your bread-and-butter. For a long time, CSS is all us frontend devs had.

CSS is pretty limited. It lacks variables and functions which can be quite useful for styling the frontend of websites, especially useful when it comes to complex custom designs.

Why use SCSS?

  1. Trying to code the styles for an intricate custom design with just css will take longer and be more challenging as you will need to write so much repetitive css that your css code base can easily become unorganised and unmaintainable.
  2. When using Scss you can utilize the power of functions and variables to create more organised, maintainable and reusable code.

In order to use SASS you need a way to convert it into CSS because browsers can’t read Sass. This is where Node comes into it..

Use Node to compile SCSS to CSS and Watch SASS files for changes

Need a simple way to output CSS from SASS? One simple way is to do the following:
CD into your project directory and install sass

Install Node modules into your project

1
2
npm init
npm install sass

The npm init command will create a package.json file, open it and add the scripts to it.

Add scripts to your package.json

Configure SASS Watch with CSS output

Note that the output of these files is relative to the package.json file

1
2
3
4
5
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "scss": "sass --watch scss/style.scss:assets/custom.css"
  },

Example 2: Output css file into the same directory as your package.json file

Here we use a ‘.’ dot to output into the same folder as a package.json file. Which in my case is usually the theme root.

1
2
3
4
5
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "scss": "sass --watch scss/style.scss:."
  },

Now, it’s execution time. In your project directory run the scss script.

1
npm run scss

Every time you save the style.scss file it will compile to custom.css the assets folder.

This post is licensed under CC BY 4.0 by the author.