Learn how to use Sass variable, nesting, mixins and more then start building a real-world web app with Sass.

Welcome to this article about Sass. Sass is an acronym for, 'Syntactically awesome style sheets', it's an extension of CSS that allows you to use different features like variables, nested rules, mixins, inheritance, operators and more. Sass is one of the most popular CSS pre-processors that simplify the process of creating and maintaining stylesheets. If you want to know about CSS pre-processor, please, click here.

There are two ways to use Sass, one, by using original Sass, here the Sass file should have .sass extension, two, by using a new version of Sass, here the Sass file should have .scss extension. The difference between sass and scss is that sass is the original version but its syntax is not the same as the CSS syntax while the scss syntax matches the CSS syntax.

In this article we will use the following guideline;

1. Sass Installation.
2. Sass variable.
3. Sass nesting feature.
4. Sass mixins feature.
5. Sass operators.

Sass installation
Sass installation can be done by either installing an application that can compile Sass directly or by using a command-line. Compass, Koala, LiveReload, Prepros and Scout-App are examples of applications that can compile Sass more quickly. But if you are going to use a command-line to install Sass, then you should install npm, chocolatey or homebrew package manager. In this article, we will use npm, to use npm make sure you installed node-js then run the following command on your command-line

npm install -g sass

To compile sass, run the following command within the directory where sass file found, the sass file should have .sass extension or .scss extension.

sass file_name.sass file_name.css
or
sass file_name.scss file_name.css

Compiling sass in one folder and the output to be placed in another folder run this command.

sass first_folder_name/file_name.sass second_folder_name/file_name.css
or
sass first_folder_name/file_name.scss second_folder_name/file_name.css

Now let us look at,

Sass variable.
Sass variable declaration must start with the $ symbol followed by a variable name. If you are going to use .sass extension for your Sass file, please don't terminate anything with ";" or closing with "{}"  but if your file name end with .scss extension, you are free to terminate and closing a given property.

Variable declaration with .sass extension;

$font-color: #ffffff
$background-color: #000000
$text-aligh: center
$height: 300px
$margin: 0
body
    margin: $margin

.main-menu
    background: $background-color

.main-menu li a
    color: $font-color

.header-banner
    height: $height
    text-align: $text-aligh

Variable declaration with .scss extension;

$font-color: #ffffff;
$background-color: #000000;
$text-aligh: center;
$height: 300px;
$margin: 0;
body{
    margin: $margin;
}
.main-menu{
    background: $background-color;
}
.main-menu li a{
    color: $font-color;
}
.header-banner{
    height: $height;
    text-align: $text-aligh;
}

After compiling the one of the above Sass files, the following CSS output file will be produced.

body{
    margin: 0;
}
.main-menu{
    background:  #000000;
}
.main-menu li a{
    color: #ffffff;
}
.header-banner{
    height: 300px;
    text-align: center;
}

Sass nesting feature.

This feature helps when you want to style both the parent and the child HTML element without having to repeatedly write the same selector every time in CSS file, look the CSS file below;

.main-menu {
  background: #000000;
}
.main-menu li {
  display: inline-block;
  padding: 10px;
}
.main-menu li a {
  color: #ffffff;
  text-decoration: none;
}

As you can see above, the .main-menu and li element have been repeated several times, this can result in writing multiple lines of code and making the CSS file larger and hard to maintain. Now when we write it in Sass format it will have a smaller size and it will look like this;

The Sass file with .scss extension

$font-color: #ffffff;
$background-color: #000000;
.main-menu{
    background: $background-color;
 li{
      display: inline-block;
             padding: 10px;
  a{
     color: $font-color;
     text-decoration: none;
  }
 }
} 

The Sass file with .sass extension

$font-color: #ffffff
$background-color: #000000
.main-menu
    background: $background-color
    li
      display: inline-block
             padding: 10px
    a
     color: $font-color
     text-decoration: none

Sass mixins feature.

By using Sass mixins feature, you can mix the properties found from one CSS selector to another CSS selector by including the one or more CSS selector in the desired CSS selector. The CSS code/CSS selector you want to reuse on your website will start with the "@mixin" directive when you declare it, but when you want to apply it to a different CSS selector you will use the "@include" directive.
For example, add background class in the header-banner class.

The sass file with .scss extension.

@mixin background{
      background: #e64646;
}
.header-banner{
     @include background;
     height: 300;
     text-align: center;
     margin: 0;
}

The sass file with .sass extension.

=background
      background: #e64646

.header-banner
     +background

     height: 300
     text-align: center
     margin: 0

The CSS output will be;

.header-banner{
     background: #e64646;

     height: 300;
     text-align: center;
     margin: 0;
}

You can also, use Sass mixin with parameters like this;

@mixin bg-padding($top, $right){
      padding: $top, $right;

}
.header-banner{
     background: #ccc;

     height: 300;
     text-align: center;
     margin: 0;

     @include bg-padding(10px, 15px);
}

Sass with operators
Mathematical operations are addition, subtraction, multiplication and division, mathematical operations are very important when you want to make some changes on any property you want to use for the desired result.

Sass mathematical operation with .scss extension

$font-color: #dd0202;
$background-color: #a70303;
$height: 500px;
$width: 90%;
.header-banner{
     width: $width + 10%;
     height: $height - 100;
     color: $font-color * 2;
     background: ($background-color / #0c8829);
}

Sass mathematical operation with .sass extension

$font-color: #dd0202
$background-color: #a70303
$height: 500px
$width: 90%
.header-banner
     width: $width + 10%
     height: $height - 100
     color: $font-color * 2
     background: ($background-color / #0c8829)

If you want to know more about Sass go here Sass