Переменные в 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;
}

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