Why should I use Sass?

Summary

Sass is both a language and a preprocessor that can be used in place of CSS to create style sheets for your web projects.

Details

Let’s break things down further. Sass is described on the official website as a “CSS extension language,” which means it’s a language based on CSS, but adds features to help you reuse code and keep your code more organized.

The name Sass can also refer to the CSS preprocessor component. The Sass preprocessor is a command line tool that you install on your computer that will take your Sass code and compile it into CSS code. This step is important because browsers can’t read Sass code directly for styling, only CSS.

Here is an example of some Sass code:

%custom-colors {
  background-color: green;
  color: red;
}

h1 {
  @extend %custom-colors;
}

p {
  @extend %custom-colors;
}

As stated above, the browser can’t read this code directly. However, when you install Sass and run it on the code above, it will generate the following CSS code:

p, h1 {
  background-color: green;
  color: red;
}

Now you can link to the CSS style sheet in your web project and the browser can read your styles.

Sass adds many features to your style sheets, such as variables, partials, imports, and the extend feature. These features allow you to reuse code and write less code overall.

In some cases, CSS has some features similar to Sass. For example, CSS also has variables. However, the syntax for writing CSS variables is fairly verbose, so using Sass allows you to write less code compared to CSS.

Exercises

You can download exercises to go along with these tutorials on our Sass exercises repository on GitHub. You don’t have to know how to use GitHub to use them. Just click the green Code button in the corner and click the Download ZIP option. Then unzip the folder and open it in your text editor.

Each module has a folder. Inside each module folder is a folder for each lesson. The lesson folders usually contain files already where you can put your code, although occassionally you will be asked to create files on your own.

NOTE: You can ignore the instructions included in the folders. The instructions are now listed directly in the lessons.

Reference

Sass Basics | Sass Website