Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets.

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.

What You Should Already Know

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

• HTML
• CSS

/* 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
}