What is Syntactically Awesome Style Sheets

Sass is just an extension of the CSS that helps us to use the things like variables, nested rules, inline imports and etc. It is compatible with all the version in CSS. 

How to use sass

It includes two types of syntax options:-

• Scss( Sassy CSS): In this syntax .scss extension files are made that are fully compliant with the CSS syntax.
• Intended(simply called 'sass'): In this .sass file extensions are used and it uses indentation rather than the use of brackets. But it is not fully compatible with the syntax of CSS, but it provides an easy and quick way to write css.

Variables

Like all other programming languages, it allows us to use variables that help us to store information in the whole stylesheet. For eg:- if we want to store a simple color value in a variable at top of the file,  and use it in setting the color of elements. It helps to change color quickly without changing each line.

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

The above Scss will produce the following CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting 

This is the double-edged sword. It helps to produce a better method just for reducing the amount of code that we need to write. The only idea for nesting your css selectors is that it provides a way to mimic the HTML hierarchy.

Following code shows the basic navigation style that uses the nesting :

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

The above code will produce the following css:-

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Mixins

The major advantage of using preprocessors is they have the ability for taking the complex and long-winded code and make it in a simplified way. That is why mixins are introduced. For eg:- if we need to add vendor prefixed, we can use a mixin. Here is the example of border-radius

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }