How to include a SASS library in project ?

Pre-Requisite of this article includes some knowledge about SASS and its applications in different fields.

SASS is a scripting language (like JS) that is compiled to CSS in the browser. It provides some extra benefits over normal CSS styling and hence enhances the way of writing CSS styles. 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.

The various advantages SASS provides over CSS are listed below:

• It provides the use of mixins, which are proved to be useful in avoiding writing multiples time the same code.
• It provides us with nesting facility and use permits the use of variables as much we want.
• It has large supportive community.

Hence nowadays, SASS is getting much importance in front of CSS. We can include SASS library in a project in many ways. Some of them are explained below:

Method 1: Importing By SASS applications

Here we will be using a manual procedure to install SASS in our PC and use it in our project. To do so follow the below-given steps.

• Download the SASS application (zip) file in any folder and extract it there. (or to any other folder you want.For downloading SASS go to its official site.

Directory where the zip file is extracted.

• After extracting, add the environment variable PATH to the SASS in the system.

setting environment variable

• Hence now the SASS library is installed in our system and is now ready to work. You can check this using command prompt.

In command prompt type “sass” to check whether its installed successfully or not.

CMD output

Method 2: Using npm to install SASS library

Whenever you are using a major framework named angular or react then you might be having npm installed in your system. Hence, SASS is also available as a npm package and you can install using it.

• First change the current directory to the directory in which you want to install SASS or where your project is there and then type the below-given command.

Syntax:

npm install -g sass

• This would install SASS as shown below

npm is used to install sass

• Now we can import it in our project and enjoy its benefits.

Method 3: Using extensions and Plugins

If you are using VS Code editor or any other of such type than in order to use SASS, we can have plugins or extensions installed in our editors. This will help us to use SASS effectively in them. Live sass compiler is the best sass extension of sass which is available at VS Code and allows sass compiler to work live. With this extension all the sass codes will be compiled to CSS as soon as web page reload which happens live.

VS extension

Method 4: Using windows package manager or Mac package manager.

If you are a windows or mac user than you might know about Chocolatey and Herbrew. These are the package manager which makes it easy for any user to download or update or uninstall any application in their system. Also, It sets up the environment variables automatically. Hence we can install sass using such managers also. For windows, if we want to do like that we have to write the below given code.

Syntax:

choco install sass

For mac, we have the below given code.

brew install sass/sass/sass

Hence in these ways, we can be able to install and include SASS libraries in our projects.