Use Sass on Your Plain Html Css & Js Projects

This is a guide on how to install the sass compiler through node and npm.

Let’s use sass on plain HTML CSS and JS projects! | Gen Yap

TL; DR

1. npm install node-sass nodemon --save-dev
2. At package.json "script" add "css": "node-sass --include-path scss path/to/file.scss path/to/output.css", and "watch": "nodemon -e scss -x 'npm run css'"
3. Now your setup has been done, enjoy. CSS uglify will be introduced in the bonus section of this article.

If you have no idea or setup failed, please follow the instructions below. If you still have problems with the setup, feel free to leave a comment.

Update: node-sass can’t process rgba(xxx,xxx,xxx,xxx) or rgb(xxx,xxx,xxx) , a trick on this is to initialize the color code (xxx,xxx,xxx) to a hex code (#xxxxxx) by the SASS $name.

$black = #000000;
.example {
    background: rgba($black, 0.5);
}

Prerequisite

Make sure you have installed NodeJS on your machine. If no, no worries, let’s install it. A bit more on NodeJS, originally JavaScript can only be run on the browser because it doesn’t have a runtime installed on our default system (macOS, Wins, etc).

NodeJs is the runtime that allows us to execute JavaScript codes outside of browsers. In this guide, I will show how to install the compiler through NodeJS.

Setup Your Project Directory

Skip this step if you have your own project files ready.

If you don’t have one, let’s clone the project folder I prepared by running git clone https://github.com/TheKinng96/sass-setup on your terminal. The folder contains a simple HTML and SCSS file, now the website style is broken because we haven’t compiled the SCSS file yet. However, if you want to see how the page will be, simply drag the style.css out of the CSS folder.

Read this article if you are new to git. HERE.

tree view of the folder.

Initialize NPM

NPM (Node Package Manager), which comes with NodeJS, is where we download libraries and use them in our codes. You can see it as a place to download plugins.

First thing first, run npm init-y to initialize and generate basic package.json config for your project. By -y option, we are telling npm to register the project by leaving blank. (We can change them later if needed.)

Installing the libraries

Now run npm i node-sass nodemon --save-dev. Node-sass is the SASS compiler and nodemon is a tool that refreshes the node app after each change detected.

To check the installation, go to package.json on code editor you should see “devDependencies” with two packages there and a node_modules folder in your project directory. The node_modules folder is the source codes for those dependencies. If you deleted that folder, just rerun npm i which will ask npm to go through your dependencies and reinstall all the listed packages.

checking the installation

Use the libraries

To use the installed libraries, some can be directly used in your code and some need to be called through the "script" section in package.json (Documentation will tell you what to do if you not sure how to).

Today we are going to call node-sass and nodemon through the “script”, so replace the "test": "echo \"Error: no test specified\" && exit 1 with "css": "node-sass --include-path scss path/to/file.scss path/to/output.css", and "watch": "nodemon -e scss -x 'npm run css'" press save.

Remember to replace the path/to/file.scss and path/to/output.css with your file path. In case you are using my folder, it should be “css”: “node-sass — include-path scss style.scss style.css” .

replacing scripts code

After it, run npm run css on your terminal (make sure you are in the right directory) you should see something like this.

It will be very annoying if we keep running npm run css manually after each time we edited our codes, so here is where nodemon comes. If we run npm run watch, nodemon gonna take care of our fresh edit.

running npm run watch

Your terminal should look like the above screenshot. And we have successfully set up the SASS compiler on our project! Congrats.

Bonus

Some of you might want to uglify the compiled CSS file. Among all libraries, I recommend using uglifycss . To install it by simply running npm i uglifycss and edit your "script" as below:

"css": "node-sass --include-path scss path/to/file.scss path/to/output.css",
“uglify-css”: “uglifycss path/to/file.css > path/to/output.min.css”,
“watch”: “nodemon -e scss -x ‘npm run css && npm run uglify-css’”

If you run npm run uglify-css , it will uglify that file you put in the first slot. Now at the “watch” , we are asking nodemon to run two commands after each SCSS file change is detected.

Learn a small thing every day and you will be a giant one day!