Урок 40. Решения: CSS-переменные (custom properties)

📁 Раздел: Современный CSS ⏱️ Время изучения: ~75 мин 🎯 Сложность: Средняя
#root

⚡ Кратко

Палитра живёт в :root, варианты карточки переопределяют --accent в своей области, fallback страхует, а тема переключается заменой значений в @media.

Задание 1 — палитра и кнопка

Объявляем токены в :root и читаем их через var(). Цвет хранится в одном месте.

:root {
  --brand:  #0f766e;
  --accent: #ea580c;
  --text:   #ecfeff;
}

.button {
  background: var(--brand);
  color: var(--text);
}

Задание 2 — варианты через переопределение

Правило .card написано один раз. Класс-модификатор меняет только значение --accent в своей области — каскад переменных делает остальное.

Инфо (синяя)
Внимание (оранж.)
.card {
  border-left: 6px solid var(--accent);
}

.card.info { --accent: #2563eb; }
.card.warn { --accent: #ea580c; }

Задание 3 — fallback

Переменная --note-bg не объявлена, поэтому подставляется второе значение из var().

Заметка на fallback-фоне (#fef9c3).
.note {
  background: var(--note-bg, #fef9c3);
  color: #713f12;
}

Задание 4 — тема

Светлая и тёмная версии используют одни правила. Меняются только значения переменных в @media.

Светлая тема
Тёмная тема
📄 lesson-40/solution.css
:root {
  --bg:   #ffffff;
  --text: #172033;
}
.panel {
  background: var(--bg);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:   #111827;
    --text: #f8fafc;
  }
}

Навигация