Introduction Of SASS

What is SASS?

SASS that stands for Syntactically Awesome Style Sheets is an extension to CSS. It does not change what CSS can do, you won’t suddenly be able to use Adobe Photoshop blend modes or anything. but it makes writing CSS a lot easier.

SASS lets you use features that don’t exist in CSS yet like variables, Nested Rules, Mixins, Inline Imports, Inheritance and more to manipulate color and other values that make writing CSS fun again.

A simple example of why SASS is useful?

Let’s assume we have a one website with three different main colors:

So, how often do you need to type those HEX values? Very often And what about variations of similar colors?

Instead of typing the values above often, you can use SASS and type:

/* define variables for the primary colors */$primary_color: #434433;
$secondary_color: #d09577;
$third_color: #ffb74d;

/* use the variables */.body {
background-color: $primary_color;
}

.header {
background-color: $secondary_color;
}

.footer {
background-color: $third_color;
}

So, when using a SASS, and the primary color changes, all you need to do is replace it.