Sass Introduction

<< Prev Next >>

Sass which is an extension of CSS stands for Syntactically Awesome Stylesheet. Sass pre-processes CSS and works well with all the versions of CSS and enhances the capability of the basic language. It is renowned for saving time and effort by preventing its users from using redundant CSS values. Saas includes various features such as variables, nested rules, mixins, inheritance, inline imports, built-in functions to manipulate color and other values, all with a fully CSS-compatible syntax.

What You Should Already Know

Before you continue you should have a basic understanding of the following

HTML
CSS

What is Sass?

Sass (which stands for Syntactically Awesome Style Sheets) is an extension to CSS.

Sass stands for Syntactically Awesome Stylesheet
Sass is an extension to CSS
Sass is a CSS pre-processor
Sass is completely compatible with all versions of CSS
Sass reduces repetition of CSS and therefore saves time
Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
Sass is free to download and use

Why Use Sass?

SASS is an extension of CSS. It is also known as CSS pre-processor. CSS file face some issue like-

Stylesheets are getting larger.
more complex.
harder to maintain.

This is where a CSS pre-processor can Resolve the CSS files issue.

A Simple Example why Sass is Useful:

Let's consider we have a website with three main colors:

#a2b9bc
#b2ad7f
#878f99

So, how many times do you need to type those HEX values? A LOT of times. And what about variations of the same colors?

Instead of typing the above values a lot of times, you can use Sass and write this:

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 using Sass, and the primary color changes, you only need to change it in one place

How Does Sass Work?

A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS.

This process is called transpiling. So, you need to give a transpiler (some kind of program) some Sass code and then get some CSS code back.

Transpiling is a term for taking a source code written in one language and transform/translate it into another language.

Sass File Type

Sass files has the ".scss" file extension.

Sass Comments

Sass supports standard CSS comments /* comment */, and in addition it supports inline comments // comment:

Sass Comments 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
}