Sass

Sass

В CSS нет функций, нет повторяющихся фрагментов кода, в общем, нет ничего, что характерно для любого языка программирования и облегчения работы. На помощь приходят препроцессоры CSS, одним из них как раз и является Sass (Syntactically Awesome Stylesheets). Sass это особый метаязык, похожий на CSS, который поддерживает множество возможностей необходимых для работы со стилями.

Вложения

В CSS несколько селекторов построены на вложениях элементов в друг друга. Например, вложенный селектор header h1 означает, что стиль следует применить к элементу <h1> который располагается внутри элемента <header>. При этом глубина вложения не играет роли. Также такой стиль не будет применяться ко всем другим элементам <h1> за пределами <header>. В CSS такие правила описываются следующим образом.

Импорт файлов

Разделение одного большого документа на множество маленьких упрощает разработку, потому что код становится проще и нагляднее, его легче отлаживать. Для загрузки одного файла из другого в Sass применяется команда @import и несмотря на схожесть написания она отличается по своему действию от стилевого правила @import. В CSS импорт влияет на время загрузки страницы в целом из-за того, что каждый файл требует отдельного сетевого запроса. Чем больше таких файлов, тем хуже для производительности сайта.

Команда @extend

Некоторые селекторы используют одни и те же стилевые правила. Чтобы не повторять одинаковый код несколько раз в CSS применяется группирование для удобства представления и сокращения кода. В этом случае селекторы перечисляются друг за другом через запятую, при этом стиль применяется к каждому селектору в группе.

Переменные в Sass

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

Препроцессоры

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

Такие разные задачи, как правило, небольшие, чуть-чуть снижают эффективность. К счастью, эти и несколько других неэффективных задач были признаны и вызов им бросили препроцессоры.

Примеси

Примеси (или миксины, от англ. mixin) — одна из самых могучих штук в Sass и по своему действию напоминают функции в языках программирования. Иными словами, это фрагмент кода, который можно вставлять несколько раз. При этом примеси обладают рядом возможностей:

Синтаксис Sass

По своему синтаксису Sass чрезвычайно похож на CSS, можно даже считать, что CSS выступает подмножеством Sass. Таким образом любой стилевой файл содержит корректный, с точки зрения Sass, синтаксис. Чтобы различать документы, Sass-файлы имеют расширение .scss.
Рассмотрим основные особенности синтаксиса Sass.

Условные выражения

Практически ни один язык программирования не обходится без команды if, которая позволяет выполнять код если некоторое заданное условие истинно. Хотя Sass к языкам программирования и не относится, в нём также имеется команда @if, а также @else. Синтаксис следующий.

Циклы в Sass

Циклы позволяют последовательно изменять значение переменной в заданных пределах и подставлять полученное значение в имена классов, значения свойств, а также использовать в вычислениях. Для создания цикла в Sass предназначена команда @for.