Синтаксис 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;
}