Все стили хранятся в .css файле.

Когда .css файл большой, то становится сложно менять стили в этом файле. Потому что их много.

Чтобы привести стили в порядок, как-то их сгрупировать используется конвертация Sass (препроцессор).

То есть вы создаете .scss файл.
В .scss файле вы можете использовать:
• переменные
• вложенности
• миксины
• наследование
и другие приятные вещи

Запускаете конвертацию Sass (препроцессор) и ваш .scss файл конверитруется в .css файл.

На заметку!
scss часто сравнивают с less.
scss более старый.
less относительно новый компилятор, ему около 4 лет.
В настоящее время less основан на Javascript.

Чтобы создать переменную нужно использовать символ $
В переменных Вы можете хранить цвета, стеки шрифтов или любые другие значения.

Sass позволит вам вкладывать CSS селекторы таким же образом, как и в визуальной иерархии HTML. Но помните, что чрезмерное количество вложенностей делает ваш документ менее читабельным и воспринимаемым, что считается плохой практикой.

Вы можете создавать фрагменты Scss-файла, которые будут содержать в себе небольшие отрывки CSS, которые можно будет использовать в других Sass-файлах.
Это отличный способ сделать ваш CSS модульным, а также облегчить его обслуживание.
Фрагмент — это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss.
Нижнее подчеркивание в имени Scss-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS.
Фрагменты Scss подключаются при помощи директивы @import.

Директива @import импортирует указанный в директиве файл в тот, где он вызывается, т.е. на выходе получается один CSS-файл, скомпилированный из нескольких фрагментов.

Например, у вас есть несколько фрагментов Scss-файлов:
_reset.scss
и
base.scss

Мы хотим импортировать _reset.scss в base.scss.

Обратите внимание на то, что мы используем @import 'reset'; в base.scss файле. Когда вы импортируете файл, то не нужно указывать расширение .scss. Sass — умный язык и он сам догадается.

Миксины позволяют создавать группы деклараций CSS, которые вам придется использовать по нескольку раз на сайте.
Вы даже можете передавать переменные в миксины, чтобы сделать их более гибкими. Так же хорошо использовать миксины для вендорных префиксов. Пример для transform:

Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать ваш Scss-файл в «чистоте». В нашем примере мы покажем вам как сделать стили оповещений об ошибках, предупреждениях и удачных исходах, используя другие возможности Sass, которые идут рука-об-руку с расширением, классами-шаблонами.
Класс-шаблон - особый тип классов, который выводится только при использовании расширения - это позволит сохранить ваш скомпилированный CSS чистым и аккуратным.

В примере обратите внимание что %equal-heights не попадает в CSS, так как ни разу не был использован.

Sass имеет несколько стандартных математических операторов, таких как +, -, *, / и %.
В нашем примере мы совершаем простые математические вычисления для расчета ширины aside и article.
Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий.