Першою корисною функцією є наявність змінних. Можна зберігати та повторно використовувати значення у коді. Це дуже схоже на мови програмування, які дозволяють створити змінну один раз і використовувати її кілька разів. Щоб оголосити змінну, потрібно поставити знак долара ($) і назву змінної, після чого вказати двокрапку (:) та присвоїти значення.

$textPrimaryColor: #49423c;

Note

Можна використовувати будь-яку нотацію іменування, наприклад, kebab case (text-primary-color), snake case (text_primary_color) або camel case (textPrimaryColor). Головне — дотримуватися однакової нотації іменування у всьому проєкті.

Уявімо, що нам потрібно створити розмітку, у якій весь текст має колір #474943 і розмір шрифту 24px. Sass-файл виглядатиме так:

$textColor: #474943;
$textFontSize: 24px;

p {
  color: $textColor;
  font-size: $textFontSize;
}

Ми завжди намагаємося робити назви змінних максимально описовими, щоб було зрозуміло, за що відповідає кожна змінна.

Перевага полягає в тому, що це спрощує внесення змін у дизайн проєкту в майбутньому. Якщо зміниться розмір шрифту або колір тексту, достатньо оновити значення змінних $textColor та $textFontSize, і зміни застосуються до всього проєкту.