Sass Introduction
What You Should Already Know
Before you continue you should have a basic understanding of the following:
- HTML
- CSS
If you want to study these subjects first, find the tutorials on our Home page.
What is Sass?
- 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?
Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.
Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.
A Simple Example why Sass is Useful
Let's say 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.
Tip: 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 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
}