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>This is a paragraph.</p>
<a href="#">This is a link</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">Toggle Theme</button>
<p>This is a paragraph.</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');
}
});
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ