Язык программирования SASS

Препроцессоры
Препроцессоры в терминах веба - это программа которая транслирует входящий в нее код (как правило расширяющий возможности и упрощающий написание на стандартных языках) в код другого языка читаемый браузерами.

вложенности селекторов
составные селекторы
арифметические операции
переменные
функции
и много прочих вкусностей...
Ускорение процесса разработки

SASS или SCSS ?
SASS (Syntactically Awesome Style Sheets) - это язык который при помощи компилятора написанного на Ruby, транислируется в CSS.
SCSS - css-подобный диалект SASS (любой CSS код - это валидный код SCSS)

Вложенности селекторов
Если написать дополнительный селектор внутри основных фигурных скобок, то это селектор становится зависимым!

Составные селекторы
Оператор - & - конкатенирует строку написанную после него с первоначальным селектором.

Арифметические операции
SASS умеет производить операции над числами, но если будут складываться разные единицы измерения то будет ошибка.

Переменные
Переменные в SASS могут хранить что угодно - строки, числа, цвета, списки (массивы) и т.д. Имя переменной может начинаться либо с латиницы либо с подчеркивания.

Используем функции
SASS содержит в себе огромное количество встроенных функций (работы с цветами, с массивами, со строками и пр.)

Так же функции можно создавать
Для создания функций есть специальные конструкции @function и @return для возращения результата.

примеси
циклы
наследование
“плейсхолдеры”
условия
Повторное использование кода

Примеси (mixins)
Примеси созданы для генерации свойств в зависимости от входных параметров

Бесконечное число параметров
Иногда в свойство CSS можно передавать несколько параметров что бы в примесях это не вызывало ошибок, нужно применить оператор (...)

Циклы
Перебирать массивы можно при помощи конструкции @each in

Условия
Конечно же есть @if, @else и @else if

Наследование
Если нам нужно расширить или унаследовать свойства класса, мы можем применить директиву @extend

Плейсхолдеры
Что бы не дублировать функциональные классы, можно использовать специальную конструкцию

Импортирование стилей

Импорт стилей
Одним из факторов влияющих на скорость загрузки страницы - это количество файлов подключеных в неё. Поэтому в документе должен быть подключен только один файл со стилями. Такие файлы называют входной точкой (entry file).
Но, что бы файл стилей не разрастался до огомных размеров, и весь код не сливался в одну “кучу” принято разбивать CSS на логические части. Это помогает реализовать конструкция @import.