Переменные CSS для темизации
Объявляйте пользовательские свойства с помощью --, используйте var(), переопределяйте их во вложенных областях видимости и реализуйте переключатель светлой и тёмной темы.
«Переменные CSS для темизации» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое пользовательские свойства CSS
Пользовательские свойства CSS (переменные CSS) хранят значения, которые можно повторно использовать во всей таблице стилей. Они объявляются с помощью --name: value и используются через var(--name). В отличие от переменных препроцессора Sass, они динамические — их можно обновлять с помощью JavaScript.
Объявление пользовательских свойств
Объявляйте свойства на :root, чтобы сделать их доступными глобально. Также можно объявить их на любом элементе, ограничив область действия его поддеревом.
:root {
--color-primary: #3182ce;
--color-bg: #f7fafc;
--color-text: #1a202c;
--spacing-md: 16px;
--border-radius: 8px;
--font-sans: 'Inter', system-ui, sans-serif;
}Использование пользовательских свойств
Ссылайтесь на переменную с помощью var(--name). Добавляйте запасное значение вторым аргументом: var(--color-primary, #3182ce). Запасное значение используется, если переменная не определена.
.card {
background: var(--color-bg);
color: var(--color-text);
padding: var(--spacing-md);
border-radius: var(--border-radius);
}
.btn {
background: var(--color-primary, blue); /* fallback */
}Каскад: переменные с ограниченной областью действия
Пользовательские свойства участвуют в каскаде и наследуются. Если переопределить переменную на дочернем элементе, для этого элемента и всех его потомков будет использоваться новое значение вместо значения родителя.
:root { --accent: blue; }
.card { color: var(--accent); } /* blue */
.special-section {
--accent: green; /* override for this subtree */
}
.special-section .card { color: var(--accent); } /* green */Тёмный режим с переменными CSS
Самый удобный шаблон тёмного режима: определите светлую и тёмную палитры цветов как переменные CSS. Переключайте класс или используйте медиазапрос prefers-color-scheme. Переопределять отдельные свойства цвета не нужно.
:root {
--bg: #ffffff;
--text: #1a202c;
--card-bg: #f7fafc;
}
[data-theme='dark'], @media (prefers-color-scheme: dark) {
:root {
--bg: #1a202c;
--text: #f7fafc;
--card-bg: #2d3748;
}
}
body { background: var(--bg); color: var(--text); }Переключение тёмного режима с помощью JavaScript
Добавьте кнопку переключения, которая изменяет атрибут данных или класс корневого элемента. Переменные CSS сделают всё остальное — одна строка JavaScript без отдельных переопределений стилей.
const btn = document.querySelector('#theme-toggle');
btn.addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-theme');
document.documentElement.setAttribute(
'data-theme',
current === 'dark' ? 'light' : 'dark'
);
});Обновление переменных с помощью JavaScript
element.style.setProperty('--name', value) обновляет пользовательское свойство непосредственно в элементе. Удаление свойства с помощью removeProperty восстанавливает значение из каскада. Это позволяет создавать динамические темы и анимированные значения.
// Dynamically set a CSS variable from JS:
document.documentElement.style.setProperty('--primary-hue', '220');
// Based on input:
const hue = document.querySelector('#hue-slider');
hue.addEventListener('input', () => {
document.documentElement.style.setProperty('--primary-hue', hue.value);
});Токены дизайна как переменные CSS
Определяйте все решения, касающиеся дизайна, — цветовую палитру, шкалу отступов и типографическую шкалу — в виде переменных CSS. Так создаётся единый источник истины, из которого берут значения компоненты. Изменение токена мгновенно распространяется повсюду.
:root {
/* Colour scale */
--blue-50: #ebf8ff;
--blue-100: #bee3f8;
--blue-500: #3182ce;
--blue-900: #1a365d;
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-8: 32px;
}Использование переменных в calc()
Переменные CSS работают внутри calc(), позволяя выполнять адаптивные вычисления на основе значений токенов.
:root { --header-height: 64px; }
.content {
/* Leave room for fixed header */
padding-top: calc(var(--header-height) + 24px);
min-height: calc(100vh - var(--header-height));
}Поддержка браузерами
Пользовательские свойства CSS поддерживаются всеми современными браузерами (с 2016 года — основными браузерами). Для этой возможности препроцессор не нужен. Запасной вариант для очень старых браузеров: укажите статическое значение перед var().
.btn {
background: blue; /* IE fallback */
background: var(--color-primary); /* modern browsers */
}Пользовательские свойства и переменные Sass
Переменные Sass компилируются в статические значения. Пользовательские свойства CSS существуют во время выполнения, являются динамическими, могут изменяться с помощью JavaScript и каскадируют через DOM. Используйте переменные CSS для темизации, а переменные Sass — для констант, задаваемых во время сборки.
Быстрая проверка
Как прочитать и обновить пользовательское свойство CSS из JavaScript?
Повторение: пользовательские свойства CSS
Объявляйте их с помощью -- на :root, чтобы создать глобальную область видимости. Используйте их с var(). Переменные в определённой области видимости каскадируют к дочерним элементам. Для тёмного режима переопределяйте цветовые токены в медиазапросе или атрибуте данных. Обновляйте их из JavaScript с помощью style.setProperty(). Токены дизайна в виде переменных — единый источник истины.
Часто задаваемые вопросы
Урок «Переменные CSS для темизации» бесплатный?
Да — полный текст урока «Переменные CSS для темизации» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Переменные CSS для темизации»?
Объявляйте пользовательские свойства с помощью --, используйте var(), переопределяйте их во вложенных областях видимости и реализуйте переключатель светлой и тёмной темы. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Переменные CSS для темизации»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Глубокое изучение Flexbox: выравнивание, перенос и порядок
- CSS Grid: template-areas, auto-fit и minmax
- Совместное использование Flexbox и Grid
- Переменные CSS для темизации