Installation Step

We will follow the below steps to install the SASS through Package Manager.

Step 1: To install SASS, first make sure that node and npm are already installed in the system. If not, then install them using the instructions given below.

• First, download the latest version of a node in the system and install it.
• Now go to the command prompt and address the folder where you want to install SASS.
• After that, you have to create a package.json file. It manages the dependencies of our project.
• Use the command written below that will ask for the package name of the user’s choice and the description. Some more formalities are there, just press enter for that and your package.json file will be created.

npm init

Step 2: Now to install SASS one simple command is used:

npm install node-sass --save

Note: – –save in the above command is used to save the SASS in dependencies of JSON file. Now SASS has been installed in your system successfully.

Step 3: To work with SASS, go to the package.json file in your project, i.e. if you are working with VSC, open your project there and then open the package.json file.

You will get a package.json file like:

{
    "name": "sass-ex",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
    },
    "author": "",
    "license": "ISC"
}

Remove the “test” script and add your own script of name compile: sass (any other name can be chosen), give the link of your sass file as a target. package.json should look like this:

{
    "name": "sass-ex",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "compile:sass": "node-sass scss/style.scss css/style.css"
    },
    "author": "",
    "license": "ISC"
}

Now go back to the command prompt and run the command:

npm rum compile:sass

Or just add a node-sass script like this:
Open the package.json file in your text editor of choice, and add the following line inside the “scripts” object:

"scss": "node-sass --watch assets/scss -o assets/css"

package.json file looks like this:

{
    "name": "sass-ex",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "scss": "node-sass --watch assets/scss -o assets/css"
    },
    "author": "",
    "license": "ISC"
}

Save the file and close it. Now, in the root of the project directory, run the command (as given below) to start watching for any changes to your .scss files.

npm run scss

SASS (Syntactically Awesome Style Sheets) is a preprocessor scripting language that extends CSS. It adds features like variables, nesting, and mixins, enhancing the power and efficiency of styling web pages. Sass files are compiled into standard CSS for browser interpretation.

Since browsers are unable to read a SASS file, so, we are required to use a SASS compiler that converts its file to a normal CSS file. It also helps reduce the overall length of the code by discarding the repeated CSS code and therefore saves time. It was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006.