Open In App

Which command is used to run SASS code from the command line ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will discuss how to run SASS code from the command line. SASS (Syntactically Awesome Style Sheet) is a simple CSS pre-processor that makes it possible to create manageable, platform-independent, and reusable style sheets for websites. It is fully compatible with every version of CSS. Sass reduces the repetition of CSS and therefore saves time. SASS doesn’t directly run with HTML. So, we have to convert SASS into CSS before using it on a web page and we can do that by using the SASS package of the npm package manager.

Configuring the SASS to compile it into CSS: We can install the latest version of the SASS package from npm by using the following command. Before we run the following command, Node.js must be installed on the system. Please refer to the Node.js NPM (Node Package Manager) for a detailed installation process. Now, run the below command to install the SASS compiler globally.

Syntax:

npm install sass -g

Note: Run the command prompt as administrator, if trouble in the installation process because of a permission issue.

If SASS still doesn’t install use, please use the below command.

sudo npm install sass -g

This command installs SASS into the system globally with superuser privileges.

Pre-compiling SASS into CSS:

To compile SASS into CSS, we use the below command in a command prompt. The sass command lets us precompile our SASS file into a basic CSS file. This helps us in writing modular code using SASS programming and still getting all the benefits of CSS by compiling it into traditional fast CSS.

Syntax:

sass <source> [destination]

Parameters: It has the following parameters.

  • source: The complete name of the SASS file with the address from the current working directory.
  • destination: The complete name of the desired CSS file with the address from the current working directory.

Example 1: If we have a file style.scss in the current working directory and we want to compile it into a CSS file as style.css in the same directory. we use the following command:

sass style.scss style.css

style.scss




$color: green;
$font: "Times New Roman";
.container1 {
    font-family: $font;
}
.container2 {
    background-color: $color;
}


Output:

style.css




.container1 {
    font-family: "Times New Roman";
}
.container2 {
    background-color: green;
}


Example 2: If we have a file style.scss in the other directory (in this case, it is in “D:\Geeksforgeeks” ), rather than in the current directory and we want to compile it into a CSS file as style.css in the same directory, we can use the following command:

sass D:\Geeksforgeeks\style.scss D:\Geeksforgeeks\style.css

style.scss




$color1: blue;
$color2: red;
$font: 20px;
  
body {
    background-color: $color1;
    color: $color2;
    font-size: $font;
}


Output:

style.css




body {
    background-color: blue;
    color: red;
    font-size: 20px;
}




Last Updated : 22 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads