10.1 Оголошення змінних
Змінні в CSS, також відомі як користувацькі властивості (CSS Custom Properties), дозволяють розробникам зберігати значення властивостей в одному місці і повторно використовувати їх у документі. Це робить CSS більш гнучким і керованим, особливо при роботі з великими проєктами.
Оголошення змінних
Змінні в CSS оголошуються з використанням двох дефісів (--) перед ім'ям змінної. Зазвичай вони оголошуються всередині селектора :root, щоб зробити їх доступними у всьому документі.
Синтаксис:
:root {
--ім'я-змінної: значення;
--ім'я-змінної: значення;
}
Приклад:
У цьому прикладі оголошено три змінні: --main-color, --secondary-color і --font-size.
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
10.2 Використання змінних
Для використання змінних застосовується функція var(), яка приймає ім'я змінної як аргумент.
Синтаксис:
селектор {
властивість: var(--ім'я-змінної);
властивість: var(--ім'я-змінної);
}
Приклад:
Цей приклад використовує раніше оголошені змінні для стилізації фону, кольору тексту і розміру шрифту елемента <body>.
body {
background-color: var(--main-color);
color: var(--secondary-color);
font-size: var(--font-size);
}
10.3 Наслідування і перевизначення змінних
Змінні CSS наслідуються по ієрархії елементів. Це означає, що якщо змінна оголошена в одному елементі, вона буде доступна і для його дочірніх елементів. Змінні також можна перевизначати всередині інших селекторів.
Приклад:
У цьому прикладі елемент .header перевизначає змінну --main-color, і ця нова змінна застосовується тільки до нього. У той же час, елемент .footer використовує значення змінної, оголошеної у :root.
<div class="header">Header</div>
<div class="footer">Footer</div>
:root {
--main-color: #3498db;
}
.header {
--main-color: #e74c3c;
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
10.4 Переваги використання CSS-змінних
1. Спрощення управління стилями:
Змінні дозволяють змінювати значення однієї властивості в одному місці, і ця зміна автоматично застосовується до всіх місць, де використовується ця змінна. Це особливо корисно для темізації і підтримки узгодженого стилю.
2. Покращення читабельності і підтримки коду:
Використання змінних робить CSS-код більш читабельним і зрозумілим, оскільки вони можуть бути використані для опису значень, таких як кольори і розміри, які можуть мати семантичне значення (наприклад, --main-color замість #3498db).
3. Динамічне оновлення стилів:
Змінні можуть бути змінені динамічно за допомогою JavaScript, що дозволяє створювати більш інтерактивні і динамічні користувацькі інтерфейси.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ