1.1 Що таке CSS-змінні?
CSS-змінні, також відомі як власні властивості (custom properties), — це змінні, що оголошуються в CSS і можуть зберігати значення, такі як кольори, розміри, шрифти та інші CSS-атрибути. Вони надають круті можливості для покращення гнучкості та підтримки стилів на веб-сторінках.
Що таке CSS-змінні?
CSS-змінні — це змінні, які можуть зберігати значення CSS-властивостей і використовуватися повторно в різних ділянках стилів. Вони визначаються за допомогою подвійного дефісу (--), і їх можна задавати в будь-якому селекторі, але зазвичай вони визначаються в кореневому селекторі :root, щоб зробити їх доступними у всьому документі.
Приклад:
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
Основні характеристики CSS-змінних:
- Повторне використання: CSS-змінні дозволяють визначити значення один раз і використовувати його багаторазово у різних частинах CSS-коду. Це допомагає уникнути дублювання та спрощує управління стилями.
- Гнучкість: значення CSS-змінних може змінюватися залежно від умов, таких як стан елемента чи медіа-запити. Це дозволяє створювати більш адаптивні та динамічні стилі.
- Наслідування: CSS-змінні успадковуються від батьківських елементів до дочірніх, що спрощує управління та організацію стилів.
- Керованість: використання змінних полегшує підтримку коду, адже зміни значень змінних автоматично відображаються на всіх елементах, що використовують ці змінні.
1.2 Приклади використання CSS-змінних
Приклад використання CSS-змінних у JavaScript:
document.documentElement.style.setProperty('--main-color', '#e74c3c');
Приклад 1: Визначення та використання змінних
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
a {
color: var(--primary-color);
}
a:hover {
color: darken(var(--primary-color), 10%);
}
<body>
<p>Це абзац.</p>
<a href="#">Це посилання</a>
</body>
Пояснення:
- У цьому прикладі визначені три змінні:
--main-bg-color,--main-text-colorі--primary-color - Ці змінні використовуються для задання кольору фону, тексту і посилань
1.3 Зміна значень змінних у JavaScript
У цьому прикладі змінні використовуються для задання теми оформлення сторінки. При натисканні на кнопку значення змінних змінюються, що призводить до зміни фону і кольору тексту:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
<button id="toggle-theme">Змінити тему</button>
<p>Це абзац.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--main-bg-color') === '#f0f0f0') {
root.style.setProperty('--main-bg-color', '#333');
root.style.setProperty('--main-text-color', '#f0f0f0');
} else {
root.style.setProperty('--main-bg-color', '#f0f0f0');
root.style.setProperty('--main-text-color', '#333');
}
});
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ