How Sass makes CSS with superpowers!

First of all, what is sass and what does it do?

What is Sass?

Sass stands for 'Syntactically awesome style sheets', is an extension of CSS that gives the ability to use some powerful features like variables, nesting, mixins, and more. It also helps to keep things organized and allows you to create style sheets a lot faster.
The only requirement for using sass is that you must have Ruby installed. as Sass is compatible with all versions of CSS.

Sass syntax

1 SCSS (Sassy CSS):
Uses the .scss file extension which means every valid CSS stylesheet is a valid SCSS file.
This syntax is enhanced with Sass features described below.

2 Indented (Sass):
Uses .sass file extension and indentation rather than brackets to indicate nesting of selectors; and newlines rather than semicolons to separate properties. it is not fully compliant with CSS syntax, but it's quicker to write.

Here are some of the most powerful features of sass:

Variables

Variables store the information you can use throughout your style sheet.
For example, you can store a color value in a variable at the top of the file, and then use this variable when setting the color of your elements. This enables you to quickly change all your colors, without having to modify each line separately.

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

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

CSS output

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

Nesting

Simply nest CSS selectors in a way to mimic HTML hierarchy.

This is a basic navigation bar style using nesting

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

  li { display: inline-block; }

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

CSS output

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

nav li {
  display: inline-block;
}

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

Partials

Small Sass files that can be imported into other Sass files. like code snippets. With these code snippets, CSS can now be modular and easier to maintain. naming a partial : _partial.scss.
with the @import directive, you can import the partial files into the current file. be careful of how many imports you're using as an HTTP request will be generated for each one.
-creating partial

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

-importing partial

// basefile.scss

@import 'reset';

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

CSS output

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

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

Mixins
block of code that enables us to group CSS declarations we may reuse throughout the project.

creation

@mixin flex {
    // write the css here
    display: -webkit-flex;
    display: flex;
}

Usage

.row {
    @include flex;
}

CSS output

.row {
    display: -webkit-flex;
    display: flex;
}

Conclusion

What you have seen is only a few of the powerful features of sass you can always refer to Sass Documentation for additional information and examples.
And here is a handy Sass cheatsheet .