How to Install SASS Locally Using Node Package Manager (NPM)

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