Quick Start

Last updated: February 12th, 2019

About

What is Sass?
Sass is a CSS preprocessor. It extends CSS by adding extra features vanilla CSS doesn't provide. Whatever code you write in Sass needs to be compiled into CSS first before you see any style changes in your website. Although it's mainly used as a Ruby module, we will be compiling Sass through the command line and the Node-sass library.
Ok, so I get what it is...but why should I use it? If my code is being compiled into plain CSS at the end of the day, why not just use CSS then?
Sass is fully CSS-compatible; any elements you style in CSS can be styled the exact same way in Sass. Developers are obviously free to style pages whichever way they'd like. That said, Sass solves common problems CSS faces by including common features found in programming languages such as variables, conditional statements, functions, inheritance, and more.

In short, Sass:

  • is more legible than CSS.
  • is easier to maintain
  • helps modularize code better
  • follows the DRY principle and helps reduce repetitions in code.
If you'd like to learn more, please support the official documentation.
Documentation

Download

To use node-sass, you first need the node package manager (npm) installed on your computer. To download it, just click this link.

Once you have npm installed, follow the steps below to set up your project folder.

Installation

Step One

Initilize your project folder:

npm init

Install node-sass:

npm install node-sass

Step Two

In the package.json file, replace the scripts element with this:

 
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile-scss": "node-sass scss-folder -o css-folder",
"compile-scss-continuously": "node-sass -w scss-folder -o css-folder"
},
								 

Step Three

Create a folder called scss-folder. Then, create a .scss file and write some Sass code in it. Here's some sample code:

$primary-color: red;

p {
color: $primary-color;
}

Step Four

Open up the terminal and run the command:

npm run compile-scss

If you want to run the command continuously in the background, use this:

npm run compile-scss-continuously

Step 5

After completing step 4, you should see a folder named "css-folder" that holds the relevant CSS files. If you used the sampe code above in your Sass file, the output should look like this:

 p { color: red; } 
And there you have it. You have successfully been able to write Sass code and compile it into CSS.