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.
How SASS Works?
The browser does not understand the SASS code. Therefore, you will need a sass pre-processor to convert the SASS code to standard CSS.
This process is called transpiling. So, you need to provide a transpiler (some kind of program) to get some SASS code and then some CSS code back.
How to Install SASS By Ruby? Read this article
SASS Installation And Implementation By Prepros. Read this article
