Summary  
This chapter explains how to declare and use variables in Sass for storing and reusing style values, making code more maintainable and easy to update.

General domain of usage  
CSS preprocessing in front-end web development

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

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

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

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

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

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

За допомогою якого символу оголошується змінна в sass?

Підвищуйте свої навички стилізації, опановуючи сучасні техніки CSS для вебдизайну. Розміщуйте та керуйте елементами з точністю за допомогою розширених стратегій позиціонування. Створюйте плавні переходи та захоплюючі анімації для покращення взаємодії з користувачем. Трансформуйте та змінюйте елементи для динамічних візуальних ефектів. Створюйте адаптивні дизайни для різних пристроїв і оптимізуйте робочий процес за допомогою CSS-препроцесорів, таких як Sass.

Дослідження очікувань слухачів від цього курсу з розширеного стилювання HTML та CSS. Необхідні попередні знання перед початком курсу. Теми, які будуть розглянуті у курсі.

Позиціонування та керування елементами на вебсторінках. Огляд різних властивостей позиціонування, вивчення використання порядку накладання для контролю видимості елементів, що перекривають один одного, а також робота з переповненням вмісту.

Дослідження можливостей переходів та вивчення способів покращення взаємодії з користувачем. Ознайомлення з методами плавної та поступової анімації властивостей для забезпечення непомітних змін стану.

Дізнайтеся про властивість animation та її використання для створення динамічних і привабливих дизайнів. Ознайомтеся зі створенням складних анімацій за допомогою keyframes і керуванням анімацією.

Дослідження властивості transform, яка дозволяє змінювати вигляд і розташування елементів на вебсторінці. Вивчення масштабування, обертання, перекошування та переміщення елементів у двох- і тривимірному просторі. Комбінування кількох трансформацій для створення складніших ефектів.

Принципи та методи, що використовуються в адаптивному та респонсивному дизайні, спрямовані на забезпечення доступності та візуальної привабливості вебсайтів і застосунків на різних пристроях, розмірах екранів і орієнтаціях.

Дізнайтеся про препроцесори в CSS та їхню роль у написанні більш ефективного й підтримуваного коду. Ознайомтеся з використанням препроцесорів для спрощення робочого процесу та створення чистішого CSS-коду.

Використання Змінних Sass для Багаторазових Стилів