Загрузка...

Переменные в CSS

Фильтры меняли пиксели. Пользовательские свойства (CSS-переменные) упрощают поддержку: один --brand на :root, кнопки читают var(--brand) — изменили токен один раз, интерфейс следует. Они каскадируют и наследуются; имена задаёте вы.

Своё имя: `--token`

Похоже на обычное объявление, но имя начинается с двух дефисов:

Глобальные токены на :root

css

:root {
--brand: #2563eb;
--brand-contrast: #ffffff;
--surface: #f8fafc;
--text: #0f172a;
--radius-md: 0.5rem;
--space-3: 0.75rem;
}

:root — корень документа, типичное место общих токенов. --names можно на любом селекторе; потомки наследуют, пока ближе не переопределят.

Чтение через `var()`

Кнопка на токенах

css

.btn-primary {
background: var(--brand);
color: var(--brand-contrast);
border: none;
border-radius: var(--radius-md);
padding: var(--space-3) calc(var(--space-3) * 1.5);
font: inherit;
cursor: pointer;
}

.btn-primary:hover {
background: color-mix(in srgb, var(--brand) 88%, black);
}

Фокус: токены + var(). Имена единообразны в проекте.

Запасное значение в `var()`

Fallback если токена нет

css

.card {
background: var(--surface, #ffffff);
color: var(--text, #111827);
border-radius: var(--radius-md, 8px);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
}

Второй аргумент — запас; опечатка в имени var() не исправится.

Область и локальные переопределения

📊 Где размещать custom properties

Область	Селектор	Когда
Глобально	`:root`	Бренд, отступы, радиусы
Компонент	`.card`, `.alert`	Defaults паттерна
Вариант	`.card.is-warning`	Смена нескольких токенов
Runtime	`[data-theme="dark"]`	Новая палитра; те же имена `var()`

Переопределяйте близко к элементу. :root затрагивает всё; иногда достаточно локального --accent.

Локальный accent на карточке

Поддерево с своим accent

css

.card {
--accent: var(--brand);
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: var(--radius-md);
padding: var(--space-3);
}

.card.is-featured {
--accent: #7c3aed;
}

.card__title {
color: var(--accent);
}

.is-featured меняет только --accent; заголовок и рамка через var().

Смена темы без дублирования цветов

Светлая по умолчанию, тёмная через data-theme

css

:root {
--surface: #f8fafc;
--text: #0f172a;
--brand: #2563eb;
}

[data-theme="dark"] {
--surface: #0f172a;
--text: #e2e8f0;
--brand: #60a5fa;
}

body {
background: var(--surface);
color: var(--text);
}

JS может менять dataset.theme — токены обновляются вживую.

Custom properties vs Sass `$`

Sass исчезает при сборке; --tokens живут в каскаде браузера.

Попробуйте

Пять токенов на :root; кнопка только через var().
--accent + .is-featured.
Уберите токен + fallback.
[data-theme="dark"] в DevTools.
Замените повтор #2563eb на var(--brand).

Частые ошибки

brand: без --
var() как имя свойства
опечатка без fallback

Итог

--name; var(--name, fallback)
:root глобально; локальный override
Далее: calc (Modern Toolkit)

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

Внимательно прочитайте каждый вопрос
Выберите лучший ответ на каждый вопрос
Вы можете пересдавать тест столько раз, сколько захотите
Ваш прогресс будет показан вверху

Язык