Sass Introduction

What You Should Already Know

Prior to proceeding, it is advisable to have a foundational understanding of the following:

HTML
CSS

If you wish to delve into these topics beforehand, you can locate the tutorials on our Home page.

What is Sass?

Sass, an abbreviation for Syntactically Awesome Stylesheet, serves as a CSS extension and pre-processor, fully compatible with all CSS versions. Developed in 2006 by Hampton Catlin and Natalie Weizenbaum, Sass efficiently reduces CSS repetition, saving valuable time. Moreover, Sass is freely available for download and utilization.

Why Use Sass?

As stylesheets become larger, more intricate, and challenging to manage, the utilization of a CSS pre-processor becomes invaluable.

Sass empowers users with functionalities beyond CSS capabilities, including variables, nested rules, mixins, imports, inheritance, built-in functions, and various other tools.

A Simple Example why Sass is Useful

Consider a website featuring three primary colors:

Instead of repeatedly typing the HEX values numerous times, especially for variations of the same colors, you can streamline the process using Sass by writing:

Sass Example

/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* use the variables */
.main-header {
background-color: $primary_1;
}

.menu-left {
background-color: $primary_2;
}

.menu-right {
background-color: $primary_3;
}

So, when apply Sass, and the primary color changes, you only must to switch it in one place.

How Does Sass Work?

Browsers cannot interpret Sass code directly. Hence, you require a Sass pre-processor to convert Sass code into standard CSS.

This conversion process is known as transpiling. Therefore, you must provide a transpiler, typically a program, with Sass code and receive CSS code in return.

Tip: Transpiling refers to the process of converting source code written in one language into another language through transformation or translation.

Sass File Type

Sass files utilize the “.scss” file extension.

Sass Comments

Sass not only supports standard CSS comments written as /* comment */, but also allows inline comments using // comment.

Sass Example

/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;

/* use the variables */
.main-header {
background-color: $primary_1; // here you can put an inline comment
}