Некоторые сведения

Первый выпуск Sass состоялся 28 ноября 2006 года. За это время метаязык претерпел некоторые изменения, однако на его предназначение это не сильно повлияло.
Sass файл сохраняется препроцессором как обычный Css файл, который используется на сайтах. Однако, чтобы Sass сохранялся в виде Css, необходимы терминал, командная строка или web-плагин.
Стоит отметить, что сами браузеры напрямую не поддерживают работу с Sass и Scss.
Также Sass не является динамическим языком, поэтому у разработчика нет возможности с его помощью анимировать Css-свойства и значения в реальном времени.

Переменные

Данный метаязык удобен тем, что позволяет использовать переменные. Это делает его схожим с языками программирования. Для человека, который знает хотя бы один язык программирования (например, Си, Си++, Python, Qbasic) и Css, не составит проблем использование переменных в синтаксисе Sass.
Sass:

$font-text: Times New Roman, sans-serif
$color-text: #00008B
div
    font: 90% $font-text
    color: color-text
    margin: 14px

CSS:

div {
    font: 90% Times New Roman, sans-serif;
    color: #00008B;
    margin: 14px;
}

Здесь $font-text и $color-text являются переменными, которым после двоеточия можно задавать какое-либо значение: цвет, шрифт, набор значений (отступы margin или padding), ширина или высота в px, em, % и так далее.

Замечание: Вместо Times New Roman лучше использовать шрифт без засечек для большей читабельности текста на сайте. Например, подойдёт такой шрифт, как Arial.
Бросается в глаза отсутствие привычных для CSS фигурных скобок и точки с запятой в конце стиля. Это не ошибка в написании, а основа синтаксиса и особенность метаязыка Sass.
Как и в языках программирования в Sass можно проводить операции с переменными. Например, к $color-text прибавить или вычесть какое-то число. Многие с помощью переменных задают высоту или ширину сразу нескольких блоков через математические операции.

Sass:

$font-hight: 200px
div
    hight: $font-hight * 2
    wight: 156px
nav
    hight: $font-hight / 2

CSS:

div {
    hight: 400px;
    wight: 156px;
}
nav {
    hight: 100px;
}

Вложенность

Также Sass имеет чёткую вложенность и визуальную иерархию. Правила вложенности облегчают процесс редактирования и создания вложенных селекторов. Эти правила используются только для элементов, соответствующим внешним селекторам.
Sass:

$font-hight: 200px
nav
    nav
        margin: 3px 5px
        padding: 7px 3px
        color: red;
    a
        padding: 13px 12px
        color: blue
        hight: $font-hight

Css:

nav nav {
    margin: 3px 5 px;
    padding: 7px 3px;
    color: red;
}
nav a {
    padding: 13px 12px;
    color: blue
    hight: 200px;
}