Sass Introduction

What you should already know

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

HTML
CSS

What is Sass?

Sass stands for Syntactically Awesome Stylesheet
Sass is an extention 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

Sass is Useful

Let's say we have a website with three main colours:

#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:


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

Sass Variables

Variables are a way to store information that you can re-use later.

With Sass, you can store information in variables, like:

strings
numbers
colors
booleans
lists
nulls

Sass uses the $ symbol, followed by a name, to declare variables:

Sass Variable Syntax:

$variablename: value;

The following example declares 4 variables named myFont, myColor, myFontSize, and myWidth. After the variables are declared, you can use the variables wherever you want:


                $myFont: Helvetica, sans-serif;
                $myColor: red;
                $myFontSize: 18px;
                $myWidth: 680px;
                  
                body {
                  font-family: $myFont;
                  font-size: $myFontSize;
                  color: $myColor;
                }
                  
                #container {
                  width: $myWidth;
                }

So, when the Sass file is transpiled, it takes the variables (myFont, myColor, etc.) and outputs normal CSS with the variable values placed in the CSS, like this:


                body {
                  font-family: Helvetica, sans-serif;
                  font-size: 18px;
                  color: red;
                }
                  
                #container {
                  width: 680px;
                }

Sass Nested Rules

Sass lets you nest CSS selectors in the same way as HTML.

Look at an example of some Sass code for a site's navigation:


                nav {
                  ul {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                  }
                  li {
                    display: inline-block;
                  }
                  a {
                    display: block;
                    padding: 6px 12px;
                    text-decoration: none;
                  }
                }

Notice that in Sass, the ul, li, and a selectors are nested inside the nav selector.

While in CSS, the rules are defined one by one (not nested):

CSS Syntax:


                  nav ul {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                  }
                  nav li {
                    display: inline-block;
                  }
                  nav a {
                    display: block;
                    padding: 6px 12px;
                    text-decoration: none;
                  }

Sass Mixins

The @mixin directive lets you create CSS code that is to be reused throughout the website.

The @include directive is created to let you use (include) the mixin.

Defining a Mixin

A mixin is defined with the @mixin directive.

Sass @mixin Syntax:


                  @mixin name {
                    property: value;
                    property: value;
                    ...
                  }

The following example creates a mixin named "important-text":

SCSS Syntax:


                  @mixin important-text {
                    color: red;
                    font-size: 25px;
                    font-weight: bold;
                    border: 1px solid blue;
                  }

Using a Mixin

The @include directive is used to include a mixin.

Sass @include mixin Syntax:

 
                  selector {
                    @include mixin-name;
                  }

So, to include the important-text mixin created above:

SCSS Syntax:


                  .danger {
                    @include important-text;
                    background-color: green;
                  }

Technical Documentation Page

What you should already know

Defining a Mixin

Using a Mixin