/ DEV

Препроцессинг CSS (SASS)

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

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

Переменные

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

$primary-color: #333

body
  color: $primary-color

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

body {
  color: #333;
}

Вложенности

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

nav
  ul
    list-style: none

  li
    display: inline-block

  a
    text-decoration: none

Когда вы сгенерируете CSS-файл, то на выходе вы получите что-то вроде этого:

nav ul {
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  text-decoration: none;
}

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

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

Миксины

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

=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);
}

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

Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому.

%message-shared
  color: #333

.message
  @extend %message-shared

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

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

Когда вы cгенерируете ваш CSS, то он будет выглядеть как пример ниже.

.message, .success, .error {
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

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

Sass имеет несколько стандартных математических операторов, таких как +, -, *, / и %.

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

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

Скомпилированный CSS выглядит так:

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

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

Кроме разнообразных базовых возможностей, существет огромное количество фреймворков построенных на Sass, таких как Compass, Bourbon и Susy.

Подробнее в официальной документации