Препроцессоры SCSS и Sass

Sass и SCSS это препроцессоры метаязыка, который компилируется в CSS. Как и HAML, данные препроцессоры значительно облегчают написание кода CSS, структурируют его, обеспечивают удобные механизмы работы.

Sass (Syntactically Awesome Stylesheets) и SCSS похожи по синтаксису, но Sass обеспечивает более строгий стиль написания, a scss – более простой, с возможностью писать в коде стандартный CSS код.

Установка

Для установки препроцессора воспользуемся Ruby. Запустите командную строку с Ruby (start command promt with ruby). Наберите команду

gem install sass

и дождитесь окончания установки. Если установка прошла удачно – продолжим работу.

Для создания CSS файла на основе Sass файла давайте создадим в рабочей папке файл style.sass (это обычный текстовый файл, созданный с помощью блокнота) и запишем в него тестовый код:

В запущенной консоли, перейдите в рабочую папку, где расположен файл style.sass и выполните код:

sass styles.sas style.css

При отсутствии ошибок, препроцессор Sass создаст скомпилированный файл style.css который содержит следующий код:

Постоянно компилировать код, при каждом внесении изменений – очень неудобно. Для того, чтобы sass сам следил за изменениями в файле наберите команду:

sass ‑‑ watch style.sass:style.css

Компилятор перейдет в режим наблюдения за файлов style.sass и при каждых сохраненных изменениях в нем, перекомпилирует style.css. Для выхода из режим наблюдения необходимо нажать Ctrl + C.

При каждой компиляции в консоль будет выводится информация о изменениях и ошибках компиляции. Следите за выводом команды и исправляйте ошибки. Если компиляция прошла успешно, то консоль выведет:

>>> Change detected to: style.sass
write style.css
write style.css.map

Синтаксис Sass

Как и для HAML, Sass позволяет упростить код без написания фигурных скобок {} и без использования точек с запятой в конце строки свойств. Для обозначения вложения необходимо делать отступ. Вид отступа: пробел, два пробела, tab не влияют на результат, единственное требование – применять одинаковый пробел на всем документе.

Рассмотрим пример кода Sass:

Результат компиляции:

Наследование

Как видно из примера выше, отступами можно задать вложенность селекторов без повторения самих селекторов при написании.
Еще пример:

Результат:

Вложенные свойства

Когда мы работаем с CSS есть много свойств, которые применяются комплексно. Например, чаще всего вместе применяют, font-family, font-size, font-weight и так далее.

Для написания комплексных свойств есть хорошее сокращение:

Результат работы препроцессора Sass:

Медиазапросы

При подходе в проектировании сайта от desktop к mobile в самом конце файла CSS дописываются медиазапросы, а верстальщик судорожно вспоминает какие свойства нужно менять. Sass позволяет использовать другой подход, добавляя медиазапросы сразу после описания элемента.

Результат компиляции

Согласитесь, не самый удобный код. Для решения этой проблемы существуют средства автоматизации. Например Sass::MediaQueryCombiner, который комбинирует медиазапросы и дописывает их в конце файла.

Родительский селектор

Для псевдоклассов очень удобным является ссылка на родителя:

Результат в CSS

Комментарии

Обычный комментарий, который останется после компиляции аналогичен комментарию в CSS: /**/.
Однако есть возможность добавлять комментарии только к sass файлу, для этого используется два слеша: //

Результат:

Переменные

Вот мы и добрались до одного из самых удобных нововведений: переменные в Sass. Имя переменной описывается значком $ и самим идентификатором. После чего присваиваем значение. Затем в коде вместо свойств используем переменную.

При компиляции переменные не выводятся, появляется лишь их результат.

Результат:

Интерполяция переменных

В некоторых случаях нужно значение переменных использовать как имя класса, id, либо свойства. Для этого используют фигурные скобки #{имя_переменной}.

Результат:

Вычисления

При необходимости Sass может выполнять арифметические действия: сложение, вычитание, умножение и деление и округление.
Сложение использует знак плюс + и может быть завершено как с единицами измерения, так и без. За базовую единицу измерения принимается величина стоящая после первого слагаемого. Так 40px + 5 будет равно 45 px.

Аналогично сложению ведет себя и вычитание.

Умножение и остаток от деления может быть произведено, если только один из операторов (первый) имеет единицы измерения.

Результат:

Деление

Деление обладает рядом особенностей, которые продемонстрированы в примере ниже.

Результат:

Обратите внимание, что при делении двух операторов с единицами измерения, результат будет безразмерный.

Препроцессоры и системы контроля версий являются незаменимыми инструментами в групповой разработке.