First of all open up your front-end project folder and create the basic files inside it like index.html and style.css files. Assuming that you’ve setup the package.json file already, next, open up the terminal and type in the following command to install SASS as a developer dependency :

npm install sass --save-dev

In the next step, it’ll be good if you create a folder called sass inside of which, create a file called main.scss. This will be the file wherein we’ll write the SASS code.

At this point, though you’ll be able to start writing the SASS code, you’ll not be able to compile it inside your style.css file. In order to start compiling the SASS code, and make it work in real world you’ll need to write the following script inside your package.json file under the scripts key as shown :

"scripts": {
    "compile:sass": "sass sass/main.scss css/style.css"
  },

Now save the compilation code and run the following code inside the terminal :

npm run compile:sass

After following this step, SASS will start compiling the CSS code inside your style.css file, each time you run the above code inside your terminal.

Note: You can also write the script with a ‘-w’ in the end so that you don’t have to run npm run compile:sass every single time you save your code. After running the terminal command once, each time you save the file, the CSS compiles automatically. Here’s how :

"scripts": {
    "compile:sass": "sass sass/main.scss css/style.css -w"
  },

To stop compiling CSS code automatically, you can type Ctrl+C anytime.