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>This is a paragraph with a link to <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>This is the header.</p>
</div>
<div class="footer">
<p>This is the footer.</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>This is a container with padding and margin.</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">Toggle Theme</button>
<p>This is a paragraph.</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, что приводит к изменению цвета фона и текста на странице.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ