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

$main-color:rgb(108, 52, 219);
$font-family: 'Arial', sans-serif;

.header {
  background-color: $main-color;
  font-family: $font-family;
}

Переменные — это основа для создания масштабируемых и легко поддерживаемых стилей в Sass. Они особенно полезны в больших проектах, где важно сохранять единообразие и быстро вносить изменения.

Такой подход позволяет быстро вносить изменения в стили, просто обновляя значения переменных.

Данные которые можно хранить в переменных:

Цвета - например основной цвет сайта, цвет фона, или цвет текста

Шрифты - семейства шрифтов или размеры шрифтов

Размеры - отступы, ширину, высоту, радиусы углов и так далее..

Рассмотрим еще несколько прмеров с переменными.

Как уже известно переменные в препроцессоре SASS объявляются с помощью знака доллара как в PHP.

$primary-color: #fff; 
$font-stack: 'Helvetica', sans-serif;
$spacing: 20px;

А теперь после объявления переменных и когда присвоили значения разберемся как их использовать

$primary-color: #3498db;
$font-stack: 'Helvetica', sans-serif;
$spacing: 20px;

Несколько преимуществ переменных:

Удобство поддержки: Если нужно изменить значение (например, цвет), достаточно обновить его в одном месте.

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

Читаемость кода: Именованные переменные делают стили более понятными и структурированными.