В CSS нет функций, нет повторяющихся фрагментов кода, в общем, нет ничего, что характерно для любого языка программирования и облегчения работы. На помощь приходят препроцессоры CSS, одним из них как раз и является Sass (Syntactically Awesome Stylesheets). Sass это особый метаязык, похожий на CSS, который поддерживает множество возможностей необходимых для работы со стилями.
В CSS несколько селекторов построены на вложениях элементов в друг друга. Например, вложенный селектор header h1 означает, что стиль следует применить к элементу <h1> который располагается внутри элемента <header>. При этом глубина вложения не играет роли. Также такой стиль не будет применяться ко всем другим элементам <h1> за пределами <header>. В CSS такие правила описываются следующим образом.
Разделение одного большого документа на множество маленьких упрощает разработку, потому что код становится проще и нагляднее, его легче отлаживать. Для загрузки одного файла из другого в Sass применяется команда @import и несмотря на схожесть написания она отличается по своему действию от стилевого правила @import. В CSS импорт влияет на время загрузки страницы в целом из-за того, что каждый файл требует отдельного сетевого запроса. Чем больше таких файлов, тем хуже для производительности сайта.
Некоторые селекторы используют одни и те же стилевые правила. Чтобы не повторять одинаковый код несколько раз в CSS применяется группирование для удобства представления и сокращения кода. В этом случае селекторы перечисляются друг за другом через запятую, при этом стиль применяется к каждому селектору в группе.
В CSS часто возникает ситуация, когда одно и то же значение применяется несколько раз. Это может быть цвет, шрифт, размер, линия и др. Если потребуется повсеместно изменить, допустим, один цвет на другой, то придётся пользоваться поиском и заменой текста. Переменные же позволяют задать все необходимые значения в самом начале кода, а затем лишь ссылаться на них. Стоит отредактировать значение переменной, как оно автоматически подставится во всех местах, где стоит переменная.
Процесс написания HTML и CSS может оказаться несколько изнурительным и требовать множества одних и тех же задач снова и снова. Таких задач, как закрытие тегов в HTML или монотонный просмотр шестнадцатеричных значений цвета в CSS.
Такие разные задачи, как правило, небольшие, чуть-чуть снижают эффективность. К счастью, эти и несколько других неэффективных задач были признаны и вызов им бросили препроцессоры.
Примеси (или миксины, от англ. mixin) — одна из самых могучих штук в Sass и по своему действию напоминают функции в языках программирования. Иными словами, это фрагмент кода, который можно вставлять несколько раз. При этом примеси обладают рядом возможностей:
По своему синтаксису Sass чрезвычайно похож на CSS, можно даже считать, что CSS выступает подмножеством Sass. Таким образом любой стилевой файл содержит корректный, с точки зрения Sass, синтаксис. Чтобы различать документы, Sass-файлы имеют расширение .scss.
Рассмотрим основные особенности синтаксиса Sass.
Практически ни один язык программирования не обходится без команды if, которая позволяет выполнять код если некоторое заданное условие истинно. Хотя Sass к языкам программирования и не относится, в нём также имеется команда @if, а также @else. Синтаксис следующий.
Циклы позволяют последовательно изменять значение переменной в заданных пределах и подставлять полученное значение в имена классов, значения свойств, а также использовать в вычислениях. Для создания цикла в Sass предназначена команда @for.