Sass Introduction

What you should know

You should have a basic understanding of the following before you continue:

  • HTML
  • CSS

If you want to learn these subjects first, please visit our Home page Visit these tutorials on the top page.

What is Sass?

  • Sass refers to Syntactically Awesome Stylessheet (a syntax super awesome stylesheet)
  • Sass is a CSS extension
  • Sass is a CSS preprocessor
  • Sass is fully compatible with all versions of CSS
  • Sass reduces CSS repetition, thus saving time
  • Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
  • Sass can be downloaded and used for free

Why use Sass?

Style sheets become larger, more complex, and harder to maintain. This is where CSS preprocessors can provide help.

Sass allows you to use features that are not available in CSS, such as variables, nesting rules, mixins, imports, inheritance, built-in functions, and other features.

A simple example that is very useful for Sass

Assuming we have a website with three main colors:

#a2b9bc
#b2ad7f
#878f99

How many times do you need to enter these HEX values? Many times. What if the same color changes?

You can write the following code in Sass instead of typing the above values multiple times:

Sass Example

/* Define variables for the original color */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Use variables */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

Therefore, when using Sass, if the original color changes, you only need to change it in one place.

How does Sass work?

Browsers do not understand Sass code. Therefore, you need a Sass preprocessor to convert Sass code into standard CSS.

This process is called transpilation (transpiling). So, you need to provide Sass code to the transpiler (a program) and then retrieve the CSS code.

Tip:Transpilation is a term used to refer to the process of converting/source code written in one language into another language.

Sass File Type

The file extension of Sass files is ".scss".

Sass Comments

Sass supports standard CSS comments /* comment */In addition, inline comments are also supported // comment:

Sass Example

/* Define main colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* Use variables */
.main-header {
  background-color: $primary_1; // You can add inline comments here
}