2.1 Оголошення CSS-змінних
CSS-змінні, також відомі як користувацькі властивості (Custom Properties), дозволяють визначати значення, які можна використовувати повторно в різних частинах CSS-коду. Вони значно спрощують управління стилями та підвищують їх гнучкість.
CSS-змінні оголошуються за допомогою подвійного дефісу (--) і можуть бути задані в будь-якому селекторі. Проте, для забезпечення доступності змінних у всьому документі, їх часто визначають у кореневому селекторі :root.
Синтаксис:
селектор {
--ім'я-змінної: значення;
}
Приклад:
У цьому прикладі оголошені чотири змінні: --main-bg-color, --main-text-color, --primary-color, і --font-size.
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
Використання CSS-змінних
Для використання значення змінної застосовується функція var(), яка приймає ім'я змінної як аргумент.
Синтаксис:
селектор {
властивість: var(--ім'я-змінної);
}
Приклад:
У цьому прикладі значення змінних використовуються для задання кольору фону, кольору тексту, розміру шрифта і кольору посилань.
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
2.2 Приклади використання CSS-змінних
Приклад 1: Основне використання змінних
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
<body>
<p>Це параграф з посиланням на <a href="#">Example.com</a>.</p>
</body>
Результат:
- Фон сторінки буде світло-сірим
- Текст буде темно-сірим
- Розмір шрифта буде 16 пікселів
- Посилання будуть синього кольору
Приклад 2: Перевизначення змінних у окремих компонентах
CSS-змінні можна перевизначати для окремих елементів чи компонентів, забезпечуючи гнучкість у стилізації:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
.header {
background-color: var(--primary-color);
color: var(--main-bg-color);
}
.footer {
--primary-color: #e74c3c; /* Перевизначення змінної */
background-color: var(--primary-color);
color: var(--main-bg-color);
}
<div class="header">
<p>Це заголовок.</p>
</div>
<div class="footer">
<p>Це футер.</p>
</div>
Результат:
- Фон заголовка буде синього кольору, а текст — світло-сірим
- Фон футера буде червоного кольору (перевизначена змінна), а текст — світло-сірим
Приклад 3: Використання змінних у комбінації з іншими значеннями
CSS-змінні можна комбінувати з іншими значеннями і функціями CSS:
:root {
--padding: 10px;
--margin: 20px;
}
.container {
padding: var(--padding);
margin: var(--margin) auto;
border: 1px solid black;
}
<div class="container">
<p>Це контейнер з відступами і зовнішніми відступами.</p>
</div>
Результат:
- Контейнер матиме відступи і зовнішні відступи, задані змінними
2.3 Використання CSS-змінних у JavaScript
Приклад використання CSS-змінних у JavaScript
CSS-змінні можна динамічно змінювати за допомогою JavaScript, що дозволяє адаптувати стилі в реальному часі:
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
<button id="toggle-theme">Перемкнути тему</button>
<p>Це параграф.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--bg-color') === '#ffffff') {
root.style.setProperty('--bg-color', '#333333');
root.style.setProperty('--text-color', '#ffffff');
} else {
root.style.setProperty('--bg-color', '#ffffff');
root.style.setProperty('--text-color', '#000000');
}
});
Пояснення:
При натисканні на кнопку змінюються значення змінних --bg-color і --text-color, що призводить до зміни кольору фону і тексту на сторінці.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ