What is "sass"

Described on the official website as "super power css", Sass has some features:

Variables

Variables are a way to store the information you want to reuse across the style sheet (or others). You can store colors, fonts, or any CSS value you think you want to reuse. Sass uses the symbol $ to turn something into a variable. Here is an example:

Sass

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

body
  font: 100% $font-stack
  color: $primary-color

CSS

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

Nesting

Sass will allow you to nest your CSS selectors in a way that follows the same visual hierarchy as your HTML. Be aware that overly nested rules will result in over-qualified CSS that can be difficult to maintain and is generally considered a bad practice.

Sass

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}

Mixins

A mixin allows you to make groups of CSS statements that you want to reuse throughout the site. You can even pass values to make your mixing more flexible. A good use of a mixin is for vendor prefixes. Here is an example for the transform:

Sass

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property
.box
  +transform(rotate(30deg))

CSS

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

All the information was obtained through the official website, for more details, see the guide Sass Basics.