Sass

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

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

Также сильно облегчает вёрстку наличие специализированных библиотек для работы с Sass, вроде Bourbon. Библиотеки содержат готовый код, помогающий в решении множества типовых задач. В итоге вёрстка сводится к добавлению небольшого кода в HTML и в стилевой файл, всё остальное библиотека берёт на себя.

См. также

Официальный сайт Sass

http://sass-lang.com

Документация на русском языке

http://sass-scss.ru

Влад Мержевич

Веб-разработчик, автор нескольких книг, посвящённых созданию сайтов, HTML и CSS. Кандидат технических наук.

Распространяется по лицензии Creative Commons «Attribution-NonCommercial» («Атрибуция — Некоммерческое использование») 4.0 Всемирная.

Взято с сайта webref.ru


Возможности Sass

Перечислим кратко основные возможности и особенности Sass, которые делают его таким удобным и могучим по сравнению с CSS.

Вложения

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

Переменные

Переменные позволяют хранить некоторые значения и затем подставлять их в нужное место кода. Удобно использовать для цвета и размера, поскольку они довольно часто повторяются в пределах одной веб-страницы. Таким образом, мы устанавливаем значение в одном месте, а Sass уже дублирует его самостоятельно. Если нам понадобится изменить везде один цвет на другой, нет необходимости прибегать к поиску и замене, достаточно изменить значение переменной.

Вычисления

В Sass можно складывать, вычитать, умножать и делить разные размеры, получая новые значения. Всё это легко сочетается с переменными, поэтому нам не надо вычислять многие вещи самостоятельно. Пусть этим занимается Sass, а не мы.

Примеси

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

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

Sass позволяет объединять несколько отдельных файлов в один с помощью импорта.

Циклы

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

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

Без операторов if и else не обходится практически ни один язык программирования. В Sass также можно выполнять набор команд только при истинности заданных условий.

Недостатки

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


Компиляция Sass

Браузеры не понимают Sass напрямую, поэтому необходимо преобразовать файл в формат CSS. Существует несколько способов, как это сделать, вот самые популярные.

  1. Установить Ruby и делать компиляцию через командную строку.
  2. Установить специализированную программу вроде Scout.
  3. Воспользоваться онлайновыми компиляторами.
  4. Использовать компилятор на сервере, например, написанный на PHP.

Каждый способ имеет свои особенности. Так, под MacOS нет необходимости устанавливать Ruby, он идёт вместе с этой операционной системой. Поэтому процесс компиляции немного упрощается, потому что мы устраняем лишний шаг.

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

http://sass-lang.com/install


Командная строка

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

Установка Ruby

MacOS

Считайте, что вам повезло. В OS X уже установлен Ruby, поэтому всё что вам требуется — это открыть приложение Terminal и перейти к следующему шагу.

Windows

Инсталлятор можно взять по адресу http://rubyinstaller.org/downloads, скачайте с сайта последнюю версию и установите её.

Установка Sass

Теперь нужно установить Sass. В MacOS откройте Terminal, в Windows нажмите Win+R и наберите cmd. В командной строке напишите:

gem install sass

Подождите немного пока все необходимые файлы будут скачаны и установлены на ваш компьютер.

Компиляция

Теперь можно сообщить Sass следить за изменением выбранного файла и компилировать его в традиционный CSS. Перейдите в командной строке в папку проекта и наберите:

sass --watch styles.scss:styles.css

Здесь: styles.scss — имя Sass-файла; styles.css — имя конечного CSS-файла.

Сам стилевой файл не обязательно должен существовать, если его нет, то он будет создан автоматически. Чтобы прекратить слежение за редактированием, перейдите к командной строке и нажмите Ctrl+C.

Для получения CSS из уже готового файла наберите следующее:

sass style.scss style.css


Использование Scout

Scout — это бесплатная программа сделанная с помощью Adobe Air, по этой причине отличается заметной неторопливостью в работе. Scout позволяет компилировать Sass-файлы в CSS без установки каких-то дополнительных утилит. И без командной строки.

Скачайте программу по этому адресу и установите её.

http://mhs.github.io/scout-app/

Поначалу Scout поражает своей простотой. Пустой экран с логотипом и маленьким плюсиком в левом нижнем углу. Его то и нужно нажать.

Окно программы после первого запуска

Окно программы после первого запуска

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

Конфигурация программы

Scout поддерживает несколько методов форматирования кода, выбор зависит от настроек конфигурации в блоке Output Modes (режимы вывода).

Development (разработка) — при создании CSS в каждое правило вставляется комментарий, из какого места Sass-файла данное правило получено.

Production (публикация) — в этом режиме комментарии отключаются.

Nested (с вложениями) — правила с вложенными селекторами сдвигаются вправо относительно родительского селектора.

Expanded (расширенный) — традиционный вывод стилевых правил. Все селекторы равнозначны и выводятся в едином виде.

Compact (компактный) — каждый селектор выводится на отдельной строке, все стилевые правила выводятся в одну строку.

Compressed (сжатый) — все стилевые правила выводятся в одну единственную строку.

Для компиляции достаточно нажать на стрелку возле имени проекта. При возникновении каких-то ошибок они будут отображаться в окне Log.

Преимуществом Scout является то, что программа отслеживает изменение файлов в реальном времени и обновляет существующие стили автоматически.

Scout для своей работы требует наличие установленной Java и при компиляции файлов может вызвать ошибку. Это происходит, если Java на компьютере нет или путь к Java не совпадает с настройками Scout. Подробнее об этой проблеме читайте здесь.

http://ageekandhisblog.com/scoutapp-how-to-fix-error-3214/


Сайт SassMeister

Одним из удобных онлайновых инструментов для редактирования Sass и получения на выходе готового CSS является сайт SassMeister, находящийся по следующему адресу.

http://sassmeister.com

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

Вид сайта SassMeister

Вид сайта SassMeister

У сайта есть четыре основных панели — Sass, CSS, HTML и результаты. Редактировать можно только Sass и HTML. Код CSS получается автоматически из Sass и напрямую его править нельзя. В результате отображается итоговая веб-страница после применения стилей. Через верхнее меню можно выбирать показ панелей, оставляя только Sass или всё вместе.

Верхнее меню

В меню имеются такие пункты.

CSS — отключить панель CSS. Это лучше делать при наборе команд Sass и экспериментах с кодом. При включенной панели компиляция происходит после любого чиха, что приводит к частому появлению ошибок.

HTML — отключить панель HTML. Если у вас нет кода HTML и вы работает только со стилем, то эту панель желательно отключить, чтобы не занимала место.

Облако — после входа на GitHub вы можете через этот пункт меню сохранять свой код и очищать все панели. Заметим, что последний набранный код сохраняется в браузере автоматически и без регистрации на GitHub.

Настройки — через это меню можно выбрать синтаксис, добавить внешнюю библиотеку, установить стиль форматирования, выбрать тему и др.

Закладка — позволяет простым перетаскиванием добавить сайт в закладки браузера.

GitHub — вход на GitHub.

В настройках подключаются дополнительные библиотеки расширяющие функционал кода и выбирается способ форматирования получающегося CSS. Имеются такие варианты.

  • expanded (расширенный) — традиционный вывод стилевых правил, все селекторы равнозначны и выводятся в едином виде.
  • nested (с вложениями) — правила с вложенными селекторами сдвигаются вправо относительно родительского селектора.
  • compact (компактный) — каждый селектор выводится на отдельной строке, все стилевые правила объединяются в одну строку.
  • compressed (сжатый) — все стилевые правила объединяются в единственную строку.

Настройки

Если залогиниться через GitHub, то результаты сохраняются на сайте gist.github.com при нажатии на облачко.


Синтаксис Sass

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

Базовый синтаксис

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

.overlay {
  display: block;
  background-color: rgba(78,79,72,.8);
  font-weight: bold;
  padding: 10px;
  color: white;
}

Здесь используется селектор класса с именем overlay, для него задано несколько свойств CSS определяющих вид элемента.

Переменные

Переменные или, правильнее сказать, константы, потому что они не меняют своё исходное значение, добавляют в код значения свойств, описанные ранее. Переменные начинаются со знака доллара ($).

$text-color: #fc0;

Далее вместо значения свойства мы просто подставляем имя константы.

.block {
  color: $text-color;
}

Вложения

При использовании вложенных селекторов мы пишем вначале один селектор, а затем через пробел другой (.block a). Такая конструкция говорит браузеру, что стиль следует применять только к селектору, находящемуся внутри первого. Например, для ссылок внутри элемента с классом block. Sass позволяет записать это правило более наглядно.

.block {
  color: $text-color;
   a {
    text-decoration: none;
  }
}

В результате мы получим такой стиль.

.block {
  color: #fc0;
}
.block a {
  text-decoration: none;
}

Использование @extend

Команда @extend расширяет стилевые правила у одного селектора, добавляя правила от другого селектора. При этом Sass делает всё грамотно — не повторяет одинаковые строки несколько раз, а группирует селекторы, сокращая и упрощая код CSS. Допустим, у нас есть два элемента, у которых разный цвет фона, остальные свойства при этом одинаковы. Мы описываем одинаковые свойства в селекторе .blue, а внутрь селектора .orange добавляем @extend .blue.

.blue {
  background: 66f;
  font-weight: bold;
  color: #fff;
}
.orange {
  @extend .blue;
  background: #f60;
}

Вот что получим на выходе. Селекторы .blue и .orange сгруппированы и к ним добавлены одинаковые для обоих селекторов свойства.

.blue, .orange {
  background: 66f;
  font-weight: bold;
  color: #fff;
}
.orange {
  background: #f60;
}

Примеси

Примеси в Sass аналогичны по своему поведению функциям в языках программирования. Мы пишем фрагмент кода CSS, а затем вызываем его множество раз. К тому же в примеси допускается передавать переменные, что делает примеси более универсальной штукой. Существуют, также, готовые библиотеки примесей. Например, вставляя в наш код библиотеку Bourbon мы получим компактный код.

@import "bourbon/bourbon";
footer {
  @include position(absolute, null 0 0 0);
}

На выходе будет следующий CSS.

footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}


Комментарии в Sass

Комментарии в стилевых файлах предназначены для пояснения фрагментов кода и заметок разработчика. Комментарии никак не влияют на сам код и они игнорируются браузерами.

Sass поддерживает два вида комментариев, условно их назовём многострочными и однострочными.

Многострочные комментарии

Комментарием считается любой текст между /* и */. На деле, конечно, это может быть как одна строка, так и несколько.

/*
 * Комментарии в стиле Drupal
 */
.sidebar {
 background: #f0f0f0;
}

Такой комментарий напрямую переносится в CSS-файл, поскольку стилевые файлы поддерживают аналогичный синтаксис комментариев.

Однострочные комментарии

Комментарием считается любой текст после //. Такой вид комментариев характерен для некоторых языков программирования, например, JavaScript.

.sidebar {
 background: #f0f0f0; // Цвет фона
 color: #800; // Цвет текста
}

Однострочные комментарии в CSS-файл не переносятся. При компиляции мы получим следующий стиль.

.sidebar {
 background: #f0f0f0;
 color: #800;
}


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

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

Любая переменная начинается с символа $, может содержать латинские буквы, дефис (-) и подчёркивание (_). По своему применению переменные похожи на свойства CSS. Мы можем задать переменной любое значение применяемое в CSS.

$text-color: #fc0;
$bg: url(img/bg.png) no-repeat;
$border: 1px solid red;
$basic-font: Arial, Tahoma, sans-serif;

Теперь для любого свойства вместо значения просто пишем имя переменной.

.block {
  background: $bg;
  color: $text-color;
}

В итоге это скомпилируется в следующий CSS-документ.

.block {
  background: url(img/bg.png) no-repeat;
  color: #fc0;
}

Как видите, просто происходит подстановка значений вместо имён переменных.


Вложения

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

.block {
  width: 200px;
}
.block h2 {
  border_bottom: 1px solid red;
}
.block .content {
  padding-left: 10px;
}

Sass делает написание таких команд более компактным и наглядным за счёт вложения.

.block {
  width: 200px;
  h2 {
    border_bottom: 1px solid red;
  }
  .content {
    padding-left: 10px;
  }
}

Таким образом, мы просто пишем контекстные селекторы внутри фигурных скобок родительского селектора.

Мы не обязаны ограничиваться только этим типом селекторов, подходят любые другие селекторы, например, соседние. В примере ниже показано их применение в Sass.

label {
  width: 32px;
  height: 26px;
  display: block;
  position: relative;
}
input[type="checkbox"] {
  + span {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: url(images/switch.png) no-repeat;
    cursor: pointer;
  }
}
input[type="checkbox"]:checked {
  + span {
    background-position: 0 -26px;
  }
}

На выходе мы получим следующий стиль.

label {
  width: 32px;
  height: 26px;
  display: block;
  position: relative;
}

input[type="checkbox"] + span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(images/switch.png) no-repeat;
  cursor: pointer;
}

input[type="checkbox"]:checked + span {
  background-position: 0 -26px;
}

Вложения удобно применять совместно с псевдоклассами или псевдоэлементами. Но чтобы Sass понял, что имеет дело не с вложенными селекторами, перед именем псевдокласса или псевдоэлемента следует поставить символ &, как показано в примере ниже.

input {
  &::-webkit-input-placeholder {
    color: red;
  }
  &::-moz-placeholder {
    color: red;
  }
  &:-ms-input-placeholder {
    color: red;
  }
}

Данный код будет преобразован в следующий стиль, который устанавливает цвет подсказывающего текста в текстовом поле.

input::-webkit-input-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}


Вычисления

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

В примере ниже используем переменную $width для хранения общей ширины макета страницы, а затем переменную $column, в ней будет храниться ширина одной колонки.

$width: 960px;
$column: $width/12;
.page {
  width: 8*$column;
}
.sidebar {
  width: 4*$column;
}

Теперь, если нам понадобится установить ширину любого элемента в колонках, достаточно умножить число колонок на переменную $column. Вот что в итоге получим в CSS.

.page {
  width: 640px;
}

.sidebar {
  width: 320px;
}

В вычислениях допустимо использовать стандартные знаки математических операций:

  • + — сложение;
  • - — вычитание;
  • / — деление;
  • * — умножение.

При вычислении учитывайте, что разные единицы CSS несовместимы друг с другом. Нельзя сложить 10% и 500px, можно только 10px и 500px, иными словами, значения должны быть с одинаковыми единицами измерения. В противном случае будет ошибка и компиляция CSS-файла не пройдёт.


Команда @extend

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

.browser, .ie, .cr, .fx {
  min-height: 16px;
  padding-left: 20px;
  background-repeat: no-repeat;
}

В Sass для этих целей применяется команда @extend, она автоматически группирует те селекторы, в которых добавляется @extend. Вначале мы пишем селектор, содержащий одинаковые стилевые правила для всей группы, затем к любому другому селектору добавляем @extend и через пробел имя первого селектора. В примере ниже показано применение этой команды на практике.

.browser {
  min-height: 16px;
  padding-left: 20px;
  background-repeat: no-repeat;
}
.ie {
  @extend .browser;
  background-image: url(../img/browser_ie.png);
}
.cr {
  @extend .browser;
  background-image: url(../img/browser_cr.png);
}
.fx {
  @extend .browser;
  background-image: url(../img/browser_fx.png);
}

Наши селекторы различаются только значением background-image, остальные стилевые правила у них общие. Поэтому мы добавляем @extend для группирования и вот что получим на выходе.

.browser, .ie, .cr, .fx {
  min-height: 16px;
  padding-left: 20px;
  background-repeat: no-repeat;
}
.ie {
  background-image: url(../img/browser_ie.png);
}
.cr {
  background-image: url(../img/browser_cr.png);
}
.fx {
  background-image: url(../img/browser_fx.png);
}

Важно, чтобы @extend ссылался на имя класса описанного выше.

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

%browser {
  min-height: 16px;
  padding-left: 20px;
  background-repeat: no-repeat;
}
.ie {
  @extend %browser;
  background-image: url(../img/browser_ie.png);
}
.cr {
  @extend %browser;
  background-image: url(../img/browser_cr.png);
}
.fx {
  @extend %browser;
  background-image: url(../img/browser_fx.png);
}

Теперь никакого класса browser нет и в помине.

См. также

Чего никто не говорил вам о команде @extend

http://www.sitepoint.com/sass-extend-nobody-told-you/


Примеси

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

  • в качестве значений можно передавать переменные, что придаёт примесям гибкость;
  • существуют библиотеки примесей вроде Bourbon, в которых реализовано множество готовых типовых задач;
  • примеси можно вынести в отдельный файл и подгружать их по мере необходимости через команду @import. Код при этом сокращается и упрощается.

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

Для создания примеси используется команда @mixin, после которой через пробел идёт произвольное имя. Внутри в фигурных скобках пишем стилевые правила. В том месте, куда нам надо вставить примесь, добавляем команду @include с её именем.

@mixin my_opacity {
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
}
.block {
  height: 100px;
  background: #fc0;
}
.block:hover {
  opacity: 0.5;
  @include my_opacity;
}

На выходе получим следующий CSS.

.block {
  height: 100px;
  background: #fc0;
}
.block:hover {
  opacity: 0.5;
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
}

Переменные в примесях

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

В примере ниже мы создаём примесь с именем box, у которой три параметра с именами $width, $color и $bg. Для параметра $bg зададим также значение по умолчанию, тогда не придётся указывать его в обязательном порядке.

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

@mixin box($width, $color, $bg: #f0f0f0) {
  border: $width solid $color;
  padding: 20px;
  background: $bg;
}
.block {
  @include box(2px, #333);
}

На выходе мы получим следующий результат.

.block {
  border: 2px solid #333;
  padding: 20px;
  background: #f0f0f0;
}

Такого рода примеси удобно применять для вендорных свойств. Это свойства с префиксами -moz, -webkit, -ms работающие только в определённом браузере. Например, сделаем примесь, которая разбивает текст на заданное число колонок. Старые версии браузеров не понимают свойство columns, поэтому для них мы продублируем это свойство с префиксами, как показано ниже.

@mixin column($count, $width) {
  -webkit-columns: $count $width;
  -moz-columns: $count $width;
  columns: $count $width;
}
.page {
  @include column(2, 200px);
}

На выходе мы получи следующее.

.page {
  -webkit-columns: 2 200px;
  -moz-columns: 2 200px;
  columns: 2 200px;
}

Как видно, примеси позволяют хранить повторяющийся код в одном месте, легко редактировать его и при желании изменять параметры.

См. также

Основы Sass: команда mixin

http://www.sitepoint.com/sass-basics-the-mixin-directive/


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

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

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

Традиционно подключаемые файлы начинаются с символа подчёркивания, так мы сразу понимаем об их вспомогательной роли. При этом само подчёркивание, так же как и расширение файла в команде @import не пишется.

Для примера создадим файл _reset.scss и в нём пропишем следующий код.

html, body, div, h1, h2, h3, p, pre,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, nav, section {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
}

Теперь для добавления этого кода в наш основной стилевой файл достаточно написать.

@import "reset";

И в конечном CSS-файле вместо @import будет добавлено содержимое _reset.scss.

На импорте файлов построены библиотеки примесей типа Bourbon. Достаточно импортировать библиотеку и можно в свой код добавлять огромное количество уже готовых штук. Вот, например, как сделать линейный градиент.

@import "bourbon/bourbon";
body {
 @include linear-gradient(#1e5799, #2989d8);
}

В CSS мы получим готовый градиент с уже добавленными вендорными префиксами.

body {
  background-color: #1e5799;
  background-image: -webkit-linear-gradient(#1e5799, #2989d8);
  background-image: linear-gradient(#1e5799, #2989d8);
}


Циклы в Sass

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

Для примера возьмём цикл от 1 до 3, он будет записываться в следующем виде.

@for $i from 1 through 3 {
 // тело цикла
}

Здесь $i это переменная-счётчик, в которой хранится номер итерации, 1 — начальное значение, 3 — конечное. Не обязательно использовать именно эти цифры. Числа могут быть и отрицательными, а цикл начинаться и с большего числа, тогда значение счётчика будет последовательно уменьшаться, а не увеличиваться, как обычно.
Теперь у нас есть переменная $i, которую мы можем подставлять внутри цикла куда нам требуется. В вычислениях переменная так и пишется, а вот в именах классов или в значениях свойств мы уже должны писать как #{$i}.

Циклы удобно применять для CSS-спрайтов, в которых использется одна фоновая картинка содержащая несколько изображений. Ограничиваем размеры элемента, чтобы часть фона была скрыта, а затем просто сдвигаем фон, показывая нужную часть.

Пример спрайта

Для этой картинки введём три класса, каждый из них соответствует фрагменту изображения. Отличаться стиль для каждого спрайта будет именем класса и значением background-image. Вот как запишется Sass.

%craft {
  background: url(images/craft.png) no-repeat;
  width: 27px; height: 31px;
  display: inline-block;
  margin-right: 10px;
}
@for $i from 0 through 2 {
  .craft#{$i} {
    @extend %craft;
    $length: -31px*$i;
    background-position: 0 $length;
  }
}

Первый спрайт имеет нулевые координаты у значения background-image, поэтому цикл мы начинаем с нуля, чтобы не делать дополнительные вычисления. Высота каждого спрайта одинакова и равна 31 пиксель, так что получить нужную нам координату легко — достаточно умножить переменную $i на 31. Обязательно надо добавить к значениям px, иначе стили не будут поняты корректно.

В результате мы получим следующий стиль.

.craft0, .craft1, .craft2 {
  background: url(images/craft.png) no-repeat;
  width: 27px;
  height: 31px;
  display: inline-block;
  margin-right: 10px;
}
.craft0 {
  background-position: 0 0px;
}
.craft1 {
  background-position: 0 -31px;
}
.craft2 {
  background-position: 0 -62px;
}


Команда @each

Команда @each позволяет пробегаться по списку значений и к каждому значению применять набор команд. Это, в какой-то мере является разновидностью цикла, но только мы имеем дело не с числовым счётчиком, а списком, значения которого формируем сами.

Синтаксис следующий. Вначале пишется команда @each, затем имя переменной, которая последовательно принимает значения из списка, далее идёт ключевое слово in и список значений разделённый запятыми. Тело цикла пишется внутри фигурных скобок.

@each $var in list1, list2... {
  // тело цикла
}

Чтобы воспользоваться текущим значением, обращаемся к нему как #{$var}.

В качестве примера возьмём список популярных браузеров. Для каждого из них вводим отдельный класс и задаём соответствующую фоновую картинку. В Sass это всё запишется в компактной форме.

@each $browser in ie, chrome, firefox, opera {
  .#{$browser} {
    background: url(../img/#{$browser}.png) no-repeat;
  }
}

Здесь мы вводим переменную $browser и список значений: ie, chrome, firefox, opera. Внутри команды создаём класс как .#{$browser} с точкой впереди и к каждому классу добавляем фоновое изображение с уникальным именем графического файла. Вот что в итоге получится.

.ie {
  background: url(../img/ie.png) no-repeat;
}
.chrome {
  background: url(../img/chrome.png) no-repeat;
}
.firefox {
  background: url(../img/firefox.png) no-repeat;
}
.opera {
  background: url(../img/opera.png) no-repeat;
}


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

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

@if (<условие 1>) {
  // команды выполняются, если <условие 1> истинно
}
@else if (<условие 2>) {
  // команды выполняются, если <условие 1> ложно, а <условие 2> истинно
}
@else {
  // команды выполняются, если все условия выше ложные
}

@else if, а также @else не являются обязательными и если в них нет нужды, просто их не пишем.

Условия допустимо писать как в круглых скобках, так и без них. В условиях используются следующие операторы:

  • == равно;
  • != не равно;
  • > больше;
  • < меньше;
  • >= больше или равно;
  • <= меньше или равно.

Для примера, условие 10 > 5 — истинно, а red == blue — нет.

Условные выражения удобны для задания триггеров — так называется проверка на соответствие некоторым заданным условиям. Например, мы можем ввести переменную $prefix, которая будет сообщать, выводить свойства с браузерными префиксами или нет. Для этого создадим примесь с именем linear-gradient, одним из параметров которой будет значение префикса, и по умолчанию установим значение как true. Теперь при вызове примеси будет идти проверка, выводить вендорные свойства или нет.

@mixin linear-gradient($color1, $color2, $prefix:true) {
  @if $prefix {
    background-image: -webkit-linear-gradient($color1, $color2);
    background-image: -moz-linear-gradient($color1, $color2);
    background-image: -o-linear-gradient($color1, $color2);
  }
  background-image: linear-gradient($color1, $color2);
}

$prefix: false;
body {
  @include linear-gradient(#1e5799, #2989d8, $prefix);
}


Библиотека Bourbon

Bourbon (читается как бурбон, такой сорт виски) — библиотека примесей Sass распространяемая по лицензии MIT. Официальный сайт находится по адресу http://bourbon.io.

Bourbon хорош несколькими вещами. Во-первых, в библиотеке действительно много актуальных вещей упрощающих написание кода — анимация, работа с цветом, фоном, рамками, полями и др. Во-вторых, вы легко можете верстать колоночную адаптивную структуру страницы с помощью Neat — фреймворка для Sass и Bourbon от тех же авторов. И, в-третьих, вы можете не ограничиваться небольшими фрагментами кода, а вставлять на страницу уже готовые компоненты вроде навигации, вкладок, колонок, таблиц и др. с помощью Reffils. Так называется набор шаблонов и компонент построенный на Neat и Bourbon.

Проще всего использовать Bourbon совместно с сайтом SassMeister. В первой строке добавляем импорт библиотеки.

@import "bourbon/bourbon";

А далее вызываем любые примеси описанные в документации Bourbon. Вот пример Sass, который добавляет градиент и плавный поворот квадрата при наведении на него курсора.

@import "bourbon/bourbon";
.box {
  border: 1px solid #2aa4b2;
  height: 40px; width: 40px;
  @include background-image(linear-gradient(#8fdce5, #3dc3d1));
  @include transition(all 2.0s ease-in-out);
  &:hover {
    @include transform(rotate(90deg));
  }
}

В итоге получим следующий стиль.

.box {
  border: 1px solid #2aa4b2;
  height: 40px;
  width: 40px;
  background-image: -webkit-linear-gradient(#8fdce5, #3dc3d1);
  background-image: linear-gradient(#8fdce5, #3dc3d1);
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
.box:hover {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}