Документация по Sass на русском

Установка Sass

Когда вы используете Sass через командную строку, то для того, чтобы запустить компиляцию .sass и .scss в .css файлы введите команду sass. Например:

sass source/stylesheets/index.scss build/stylesheets/index.css

Используя любой способ установки Sass, запустите команду sass --version чтобы быть уверенным, что установка прошла успешно. Если эту команду выполнить, то в ответ вы получите версию Sass 1.5.1. Также вы можете запустить команду sass --help для получения информации по использованию Sass в командной строке.

Как только все настроено, начинайте наслаждаться. Если вы впервые столкнулись с Sass, то специально для вас мы создали несколько ресурсов для обучения.

Установка в любом месте (Standalone)Вы можете установить Sass в Windows, Mac, или Linux путем скачивания дистрибутива для вашей операционной системы from GitHub и выполните действия с PATH. Вот и все: никаких зависимостей нет и ничего не нужно устанавливать дополнительно.Установка в любом месте (npm)

Если вы используете Node.js, то вы можете установить Sass c помощью npm:

npm install -g sass

Однако, учтите, что это установит реализацию Sass на нативном JavaScript, которая работает несколько медленнее, чем другие реализации, перечисленные здесь. Но он имеет тот же интерфейс, поэтому будет легче поменять на другую реализацию позже, если вам потребуется немного больше скорости!Установка в Windows (Chocolatey)

Если вы используете менеджер пакетов Chocolatey для Windows, вы можете установить Dart Sass при помощи команды:

choco install sass

Установка в Mac OS X (Homebrew)

Если вы используете менеджер пакетов Homebrew для Mac OS X, вы можете установить Dart Sass при помощи команды:

brew install sass/sass/sas

Препроцессинг

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

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

Самый простой способ получить такой результат — использовать терминал. После того, как Sass установлен, вы можете компилировать ваш Sass в CSS, используя команду sass. Вам всего лишь нужно сообщить Sass, где взять файл Sass и в какой файл CSS его скомпилировать. Например, запустив команду sass input.scss output.css в терминале, вы сообщаете Sass взять один Sass файл, input.scss, и скомпилировать в файл output.css.

Также, вы можете следить за изменениями только определенных файлов или папок, используя флаг --watch. Данный флаг сообщает Sass, что необходимо следить за изменениями указанных файлов и при наличии таковых производить перекомпиляцию CSS после сохранения файлов. Если вы хотите отслеживать изменения (вместо ручной перекомпиляции) вашего файла, например, input.scss, то вам необходимо просто добавить флаг в команду:

sass –watch input.scss output.css

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

sass --watch app/sass:public/stylesheets

Sass будет отслеживать все файлы в директории app/sass и компилировать CSS в директорию public/stylesheets.

Переменные

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

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Sass

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Когда Sass обрабатывается, он принимает значения, заданные нами в $font-stack и $primary-color и вставляет их в обычном CSS-файле в тех местах, где мы указывали переменные как значения. Таким образом переменные становятся мощнейшей возможностью, например, при работе с фирменными цветами, используемыми на всем сайте.

Вложенности

При написании HTML, Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS это не так.

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

Чтобы понять что мы имеем ввиду, приведем типичный пример стилей навигации на сайте:

SCSS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

 

Sass

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

 

CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Вы заметили, что селекторы ulli, и a являются вложенными в селектор nav? Это отличный способ сделать ваш CSS-файл более читабельным. Когда вы сгенерируете CSS-файл, то на выходе вы получите что-то вроде этого:

Фрагментирование

Вы можете создавать фрагменты Sass-файла, которые будут содержать в себе небольшие отрывки CSS, которые можно будет использовать в других Sass-файлах. Это отличный способ сделать ваш CSS модульным, а также облегчить его обслуживание. Фрагмент — это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss. Нижнее подчеркивание в имени Sass-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS. Фрагменты Sass подключаются при помощи директивы @import.

Импорт

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

Например, у вас есть несколько фрагментов Sass-файлов — _reset.scss и base.scss. И мы хотим импортировать _reset.scss в base.scss.

SCSS

// _reset.scss
html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}
// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Sass

// _reset.sass
html,
body,
ul,
ol
  margin:  0
  padding: 0
// base.sass
@import reset
body
  font: 100% Helvetica, sans-serif
  background-color: #efefef

 

CSS

html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Обратите внимание на то, что мы используем @import 'reset'; в base.scss файле. Когда вы импортируете файл, то не нужно указывать расширение .scss. Sass — умный язык и он сам догадается.

Миксины (примеси)

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

SCSS

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

 

Sass

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property
.box
  +transform(rotate(30deg))

 

CSS

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

 

Расширение/Наследование

Это одна из самых полезных функций Sass. Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать ваш Sass-файл в «чистоте». В нашем примере мы покажем вам как сделать стили оповещений об ошибках, предупреждениях и удачных исходах, используя другие возможности Sass, которые идут рука-об-руку с расширением, классами-шаблонами. Класс-шаблон — особый тип классов, который выводится только при использовании расширения — это позволит сохранить ваш скомпилированный CSS чистым и аккуратным.

SCSS

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

 

Sass

/* This CSS will print because %message-shared is extended. */
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333


// This CSS won't print because %equal-heights is never extended.
%equal-heights
  display: flex
  flex-wrap: wrap


.message
  @extend %message-shared


.success
  @extend %message-shared
  border-color: green


.error
  @extend %message-shared
  border-color: red


.warning
  @extend %message-shared
  border-color: yellow

CSS

.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

 

Вышеуказанный код сообщает классам .message.success.error и .warning вести себя как %message-shared. Это означает, что где бы не вызывался %message-shared, то и .message.success.error и .warning тоже будут вызваны. Магия происходит в сгенерированном CSS, где каждый из этих классов получает css-свойства, как и %message-shared. Это позволит вам избежать написания множества классов в HTML элементах.

Вы можете расширить большинство простых CSS селекторов прибавление к классам-шаблонам в Sass, однако, использование шаблонов — простейший способ быть уверенным, что вы не расширяете класс везде, где он используется в ваших стилях, что могло бы привести к непреднамеренным наборам стилей в вашем CSS.

Когда вы генерируете ваш CSS, то он будет выглядеть как пример ниже. Обратите внимание, %equal-heights не попадает в CSS, так как ни разу не был использован.

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

Использовать математику в CSS очень полезно. Sass имеет несколько стандартных математических операторов, таких как +-*/ и %. В нашем примере мы совершаем простые математические вычисления для расчета ширины aside и article.

SCSS

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

 

Sass

.container
  width: 100%


article[role="main"]
  float: left
  width: 600px / 960px * 100%


aside[role="complementary"]
  float: right
  width: 300px / 960px * 100%

CSS

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

 

Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий. Скомпилированный CSS выглядит так.

Преимущества Sass

  • Полная совместимость с CSSSass полностью совместим со всеми версиями CSS. Мы уделяем серьезное внимание совместимости, поэтому вы можете легко использовать любые доступные библиотеки CSS.
  • Богатая функциональностьSass может похвастаться большим количеством возможностей, чем любой другой язык расширения CSS. Команда Sass Core бесконечно работает не только для поддержания этих возможностей, но и для того, чтобы быть впереди.
  • ОпытSass находится в активной разработке более 8 лет.
  • Поддержка индустриейСнова и снова сообщество разработчиков выбирает Sass как главное средство написания CSS.
  • Большое сообществоSass активно поддерживается и разрабатывается консорциумом высокотехнологичных компаний и нескольких сотен разработчиков.
  • ФреймворкиЕсть бесконечное количество фреймворков, построенных на Sass. Compass, Bourbon и Susy — это только несколько примеров из всего количества.

Синтаксис

Существует два варианта синтаксиса Sass:

SCSS

Первый вариант известен как SCSS (Sassy CSS) и он является расширением синтаксиса CSS. Это означает, что любое допустимое значение в CSS3 стилях будет допустимо и в SCSS. Кроме того, SCSS понимает большинство СSS-хаков и синтаксис вендорных префиксов, например, старый префикс IE filter. Этот синтаксис усиливается с применением возможностей Sass, описанных далее. Файлы этого варианта синтаксиса имеют расширение .scss.

SASS

Второй вариант, к тому же самый старый, известен как синтаксис отступов (или просто sass). Этот синтаксис обеспечивает более краткий вариант написания CSS. Он использует отступы вместо фигурных скобок, указывающие на вложение селекторов, и новые строки, заменяющие точки с запятой, для разделения свойств. Некоторые пользователи считают, что этот синтаксис легче читается и быстрее пишется, чем SCSS.

Синтаксис отступов имеет все те же функции, хотя и некоторые из них имеют немного другой вид написания, об этом можно более подробно ознакомиться в главе документации ‘SASS — синтаксис отступов’. Файлы этого варианта синтаксиса имеют расширение .sass.

Любой из вариантов синтаксиса может импортировать файлы написанные в другом варианте синтаксиса. Файлы могут автоматически конвертироваться в другой с помощью команды sass-converta в командной строке (терминале):

ruby
sass-convert style.sass style.scss

Данная команда не генерирует CSS-файл. Для компиляции в CSS-файл используйте команду sass.

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

Sass может использоваться тремя путями:

  • Как инструмент в командной строке
  • Как отдельный модуль Ruby
  • Как модуль для любого, поддерживающего Rack, фреймворка, в том числе Ruby On Rails и Merb

Первым шагом для начала работы является установка gem’а Sass:

bash
gem install sass

Если для работы вы используете Windows, сначала вам необходимо установить Ruby.

Для запуска Sass из командной строки используйте команду1:

bash
sass input.scss output.css

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

bash
sass --watch input.scss:output.css

Если у вас в папке имеется несколько файлов Sass, то вы можете указать Sass следить за всей папкой:

bash
sass --watch app/sass:public/stylesheets

Используйте команду sass --help для получения полной документации.

Использовать Sass в Ruby также очень просто. После установки gem’a Sass вы сможете его использовать, указав require "sass" и c помощью Sass::Engine. Например:

ruby
engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> #main { background-color: #0000ff; }

1 Перед запуском команды не забудьте создать input.scss

Использование в Rack/Rails/Merb

Для подключения Sass в Rails версии ниже 3, укажите в файле environment.rb следующую строку:

ruby
config.gem "sass"

Для Rails 3 вместо вышенаписанного сделайте запись в Gemfile:

ruby
gem "sass"

Для подключения Sass в Merb версии ниже 3, укажите в файле config/dependencies.rb следующую строку:

ruby
dependency "merb-haml"

Для подключения Sass в Rack-приложении, укажите в файле config.ru:

ruby
require 'sass/plugin/rack'
use Sass::Plugin::Rack

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

По умолчанию файлы .sass и .scss находятся в public/stylesheets/sass (можно изменить с помощью опции :template_location). Затем, когда это необходимо, они компилируются в соответствующие CSS-файлы в public/stylesheets. Например, public/stylesheets/sass/main.scss будет скомпилирован в public/stylesheets/main.css.

Кеширование

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

Без использования фреймворков Sass кладет скешированные шаблоны в папку sass-cache. В Rails и Merb в папку tmp/sass-cache. Папка может быть изменена с помощью опции :cache_location. Если Вы не хотите, чтобы Sass использовал кеш, то можете отключить данную функцию, если параметру :cache зададите значение false.

Настройки

Настройки могут быть заданы по формату Sass::Plugin#options и записаны в environment.rb в Rails или в config.ru в Rack…

ruby
Sass::Plugin.options[:style] = :compact

…или настройкой Merb::Plugin.config[:sass] с записью в init.rb в Merb…

ruby
Merb::Plugin.config[:sass][:style] = :compact

…или путем передачи хеш в Sass::Engine#initialize. Все соответствующие опции доступны через метки sass и scss в командной строке.

Доступные настройки

| —— | | :style | | Задает стиль выходного файла. Читайте стили выходного файла. | | :syntax | | Задает синтаксис компилируемого файла. Укажите :sass для синтаксиса отступов или :scss для синтаксиса подобия CSS. Эта опция используется, если вы работаете с ядром Sass ( Sass::Engine). Параметр задается автоматически при использовании Sass::Plugin. Значение по умолчанию: :sass. | | :property_syntax | | Задает правило, для документов с синтаксисом отступов, использовать один синтаксис свойств.Если правильный синтаксис не используется, то выдается ошибка. | | Значение :new устанавливает правило постановки двоеточия после свойства. Например: color: #0f3 или width: $main_width. | | Значение :old устанавливает правило постановки двоеточия до свойства. Например: :color #0f3 или :width $main_width. По умолчанию, оба варианта валидны. Данная опция не работает для файлов c расширением scss!| | :cache | | Позволяет кешировать разобранные файлы Sass для увеличения скорости работы. Значение по умолчанию: true. | | :read_cache | | Если эта опция указана, а :cache нет, то кеш будет только читаться (если он существует), без записи нового. | | :never_update | | Данная опция используется, когда обновление CSS-файла не требуется, даже если обновился sass-файл. Использование данной опции может дать небольшой прирост производительности. По умолчанию, значение данной опции всегда false. Имеет смысл использовать в Rack, Ruby On Rails или Merb. | | :always_update | | Опция используется, когда CSS-файл должен обновляться каждый раз после того, как контроллер дает доступ, а не только когда sass-файл был изменен. По умолчанию, значение данной опции всегда false. Имеет смысл использовать в Rack, Ruby On Rails или Merb. | | :poll | | Когда значение опции true, всегда используйте опрос серверной части для Sass::Plugin::Compiler#watch, а не стандартной файловой системы. | | :full_exception | | Данная опция отвечает за полное описание ошибки из sass-файла в генерируемом CSS. Если значение опции true, то ошибка будет отображаться вместе с номером строки и исходным кодом, в качестве комментария, в файле CSS и наверху странички (только в поддерживаемых браузерах). В противном случае, в коде Ruby будет добавлено исключение. По умолчанию, значение false в промышленном режиме и true в других. |

Выбор синтаксиса

Если вы работаете с Sass через командную строку, то синтаксис определяется через расширение файла. Однако, синтаксис можно выбрать не только расширением файла. Синтаксис по умолчанию — синтаксис отступов, но вы можете изменить синтаксис, применив параметр --scss, и тогда входной файл будет читаться как файл с синтаксисом scss.

Кодировка

Когда используется Ruby 1.9 или более поздние версии, Sass сам определяет кодировку файла. Для определения кодировки таблицы стилей Sass использует CSS спецификации, после определения Sass возвращает кодировку в Ruby для правильной компиляции. Это означает, что сначала идет считывание порядка байтов Unicode, далее директивы @charset, потом кодировки строк Ruby. Если ни один из них строго не заданы, то документу присваивается значение по умолчанию — UTF-8.

Чтобы явно указать кодировку таблицы стилей, используйте директиву @charset как и в обычном CSS. Добавьте конструкцию @charset "имя кодировки" в начале таблицы стилей (не пропуская пробелов и перед любыми комментариями) и Sass будет интерпретировать это как заданную кодировку. Обратите внимание на то, что какую бы вы не использовали кодировку, она должна конвертироваться в Unicode.

Sass всегда будет компилировать результирующие файлы в кодировке UTF-8. Такие файлы всегда будут иметь запись @charset, если, и только в этом случае, результирующий файл будет содержать в себе не ASCII контент. В сжатом стиле в кодировке UTF-8 байт отведенный под директиву @charset будет помечен как используемый.

SassScript

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

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

Интерактивная оболочка

Вы можете легко экспериментировать с SassScript с помощью интерактивной оболочки. Для запуска оболочки запустите Sass из командной строки с параметром -i. В командной строке введите любое поддерживаемое SassScript выражение, чтобы оценить его работу, результат выведется для вас на экран:

bash
$ sass -i

>> «Hello, Sassy World!» «Hello, Sassy World!»

>> 1px + 1px + 1px 3px

>> #777 + #777 #eeeeee


>> #777 + #888 white