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?
- 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.
- 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.