How to Install SASS Locally Using Node Package Manager (NPM)
Published: 2023-05-09 11:39:28

## **Introduction**

**What is SASS?**

Sass (Syntactically Awesome Style Sheets) is a preprocessor scripting language that is used to extend the capabilities of CSS (Cascading Style Sheets). It provides a way to write CSS more efficiently and with more advanced features, such as variables, mixins, nesting, extends, and functions.

Sass files are saved with a .scss extension, and they are compiled into standard CSS files. The compilation process involves interpreting the Sass syntax and converting it into CSS code that can be understood by web browsers.

**What is Node Package Manager (NPM) and why is it useful for installing Sass?**

Node Package Manager (NPM) is a command-line tool that is used to manage packages for Node.js, a popular server-side JavaScript runtime. It provides a centralized repository of open-source software packages that can be easily installed and managed using simple commands. 

NPM is useful for installing Sass because it simplifies the installation process by automatically downloading and installing all of the dependencies required for Sass to function properly. Secondly, it makes it easier to manage different versions of Sass as well as other packages used in a project.


## **Prerequisites for installing Sass with NPM**

Before installing Sass using NPM, ensure that Node.js and NPM are installed on your system. You can check if you have these installed by running the following commands in your terminal:

```
node -v
npm -v
```

If the version numbers are not returned by these commands, download and install Node.js from the official website.


## **Installing Sass with NPM**

To Install Sass as a development dependency for a specific project, follow the steps outlined below; 

* STEP 1: Open a terminal window or command prompt and navigate to your project directory.

```
 cd project-name
```

* STEP 2: Initialize your project with NPM by running the following command:

```
 npm init -y

     or

 npm init
```
The command `npm init` creates a new package.json file in your project directory. The `-y` option skips the interactive prompts that would otherwise ask you to enter values for these fields.

Here is an example of what the package.json file created by `npm init -y` would look like:

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


* STEP 3: Install Sass by running the following command:

```
npm install sass --save-dev
```

This command will install the latest version of Sass as a development dependency and add it to the `devDependencies` section in your project's package.json file.

* STEP 4: Once Sass is installed, you can create a folder name `sass` and in the folder, create a file called `main.scss` file in your project directory and start writing Sass code. 

For example, you could add the following code to the `main.scss` file;

```
$primary-color: #24a0ed;

h1 {
  color: $primary-color;
}

button {
  color: #fff;
  background-color: $primary-color;
  border: none;
  padding: 10px 20px;
  border-radius: 15px;

  &:hover{
    color: $primary-color;
    background-color: #ffff;
    border: 1px solid $primary-color;
  }
}
```
This code defines a variable called $primary-color and uses it to set the color of the `h1` element and the background-color of the `button`. 

> Ensure that the `h1` element and `button` are defined in the index.html file. Also, ensure to link the compiled CSS file in your HTML file using the <link> tag:

```
<link rel="stylesheet" href="src/styles.css">
```

* STEP 5: To compile the `main.scss` file to a CSS file, navigate to the package.json file and edit the scripts field;

Replace

```
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
```

with

```
"scripts": {
    "compile:sass": "sass sass/main.scss src/styles.css -w"
  },
```

**Script command explanation**

`compile:sass` is the name of the custom script command. 

`sass sass/main.scss src/styles.css` is the command that runs the Sass compiler. 

`Sass` is the package that was installed as a dev dependency. The Sass command is followed by two arguments: `sass/main.scss` and `src/styles.css`.

`sass/main.scss` - The input file `main.scss` is in the `sass` folder.

`src/styles.css` - The output file `styles.css` is in the `src` folder.

> The Sass code in the `main.scss` will be compiled into CSS code and saved in the `src/styles.css` file.

`-w:` This is an optional flag that tells the Sass compiler to watch for changes to the input file `sass/main.scss` and automatically recompile the output file `src/styles.css` when changes are detected. This is useful during development when we want to see changes to the Sass code reflected immediately in your CSS code.

* STEP 6: Finally, run the following command in the terminal compile the Sass code in the input file(s) and generate CSS code in the output file.

```
npm run compile:sass 
```

Then, click on the live server to preview the code.

> It's important to keep the terminal window open while the Sass compiler is running in watch mode so that the compiler process can continue to run and automatically update your CSS code as you make changes to your Sass code.

> If you close the terminal window while the Sass compiler is running in watch mode, the compiler process will also be terminated, and you won't be able to see the changes you make to your Sass code reflected in your CSS code until you manually re-run the `npm run compile:sass` command again.

## Conclusion

Sass is a CSS preprocessor that is widely used in web development to write cleaner and more efficient CSS code. By installing Sass as a development dependency, we can quickly and easily manage and update Sass's version and dependencies using Node Package Manager (NPM).