Как работают переменные в Sass

Development | Amber | Комментировать запись

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

В Sass переменные начинаются с символа $.

Читайте также: Основы синтаксиса миксинов в Sass

Давайте взглянем на такой пример:

$box-bgcolor: #FF8100;
$box-border: 4px dashed yellow;

.box {
  background-color: $box-bgcolor;
  border: $box-border;
}

Вышеприведенный фрагмент компилируется в следующий CSS:

.box {
  background-color: #FF8100;
  border: 4px dashed yellow;
}

Что в результате имеет такой вид: