Переменные

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

Объявление и использование

Переменная объявляется как свойство CSS: имя, двоеточие, значение. Напишите в styles/main.scss:

// styles/main.scss
$primary: #2563eb;
$radius: 8px;
 
.btn {
  color: white;
  background: $primary;
  border-radius: $radius;
}

После компиляции переменных не остаётся — только их значения:

.btn {
  color: white;
  background: #2563eb;
  border-radius: 8px;
}

Подходит любое значение CSS

В переменной может быть число с единицей, цвет, строка или целый список значений:

// styles/main.scss
$font-main: system-ui, sans-serif;
$shadow: 0 2px 8px rgb(0 0 0 / 0.15);
$gap: 16px;
 
.card {
  padding: $gap;
  font-family: $font-main;
  box-shadow: $shadow;
}

.card {
  padding: 16px;
  font-family: system-ui, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

<style>
  .card {
    padding: 16px;
    font-family: system-ui, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
</style>
 
<div class="card">Карточка с тенью</div>

Обратите внимание: Sass записал цвет тени в форме rgba() — для браузера это то же самое.

Область видимости

Переменная, объявленная в начале файла, видна везде ниже. Переменная, объявленная внутри правила, — локальная: она существует только внутри фигурных скобок.

// styles/main.scss
.card {
  $inner-gap: 12px;
  padding: $inner-gap;
}

Обращение к $inner-gap за пределами .card — ошибка Undefined variable.

Переменные Sass и пользовательские свойства

Вы уже знаете пользовательские свойства CSS вроде --primary. Они похожи, но работают в разное время:

Переменные Sass подходят для констант кода — точек перелома, размеров, исходных цветов. Пользовательские свойства — для значений, которые должны меняться на странице, например для тёмной темы. Позже в курсе они работают вместе.

Частая ошибка

Переменную Sass нельзя «переключить» медиазапросом. Кажется, что этот код увеличивает отступ на широких экранах:

// styles/main.scss
$gap: 16px;
 
.card {
  padding: $gap;
}
 
@media (min-width: 768px) {
  $gap: 32px;
}

Но значение уже подставлено при компиляции .card, а пустой медиазапрос отбрасывается:

.card {
  padding: 16px;
}

Пишите новое значение внутри медиазапроса: @media (min-width: 768px) { .card { padding: 32px; } } — или используйте пользовательское свойство.