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

SASS is an abbreviation of Syntactically Awesome Style Sheets. It is a pre-process that compiles the code of SCSS and converts it into the CSS (cascading style sheet). It is a superset of CSS.

This tutorial will teach us to compile the SCSS code using the terminal.

Steps to run SASS From the Terminal

Users should follow the below steps to run the SASS code from the terminal.

• Step 1 − Users should have installed Node.JS on their local computer. If not, Go to https://nodejs.org/en/download, download and install from there.

• Step 2 − Now, we need to create a Node project. Open the terminal in the project directory and run the below command in the terminal to start the new NodeJS project.

npm init -y

• Step 3 − Now run the below command in the terminal to install the SASS in the current node project.

npm i node-sass

• Step 4 − Open the package.json file of the current project, and add the below line in the ‘scripts’ object.

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

• Step 5 − Create SCSS and CSS folders in the project directory. Also, add the style.scss file in the SCSS directory, and style.css file in the CSS directory.

Here is the project directory structure.

• Step 6 − Now add the below SASS code in the style.scss file.

$height: 45rem;
$border: 2px, solid, blue;

div {
   height: $height;
   border: $border;
   border-radius: 1rem;
}

• Step 7 − Now, run the below command in the terminal to compile the SCSS code.

npm run scss

• Step 8 − It will produce the below output code in the style.css file. If not, change the code of the scss file when the script is running.

div {
   height: 45rem;
   border: 2px, solid, blue;
   border-radius: 1rem;
}

Now, whenever users will make changes to the style.scss file, the output will also be changed in the style.css file.

Why do we use SASS Over CSS?

There are lots of benefits to using SASS over CSS.

• Variables − Sass allows us to create variables, which can simplify the CSS code and reduces the complexity. For example, we can define a backgroundColor variable and assign a proper value to it. After that, we can use variables throughout the code rather than the hard-coded color value.

• Mixins − Sass allows us to define mixins, which are reusable blocks of code like the functions we can use in other parts of the code.

• Nesting − Sass allows us to nest CSS selectors within one another, making our code more organized and easier to read. For example, We can nest a ul selector within a nav selector to style a navigation menu.

• Import − We can create partial SCSS files in SASS and import them to other SCSS files, breaking down the code of different components into a separate file.