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

Рабочие примеры

В каждом примере сверху — реальный результат, ниже — код. Превью используют те же значения переменных, что и в коде.

1. Объявление в :root и чтение через var()

Цвет бренда хранится в одной переменной и применяется к фону и рамке.

:root {
  --brand: #0f766e;
}

.button {
  background: var(--brand);
  border: 3px solid var(--brand);
  color: #ecfeff;
}

2. Палитра проекта в переменных

Дизайн-токены цвета объявляются раз и переиспользуются везде. Вот сама палитра:

:root {
  --brand:  #0f766e;
  --accent: #ea580c;
  --text:   #172033;
  --bg:     #f8fafc;
}

3. Одна переменная — разный вид во многих местах

Две карточки используют одинаковое правило .card, но каждая переопределяет --accent в своей области. Меняется только значение переменной.

.card {
  border-left: 6px solid var(--accent);
}
.card strong { color: var(--accent); }

.card.success { --accent: #16a34a; }
.card.danger  { --accent: #dc2626; }

4. Запасное значение var(--x, fallback)

Переменная --note-bg нигде не объявлена, поэтому подставляется fallback — жёлтый фон.

.note {
  /* --note-bg не определена → берётся #fef9c3 */
  background: var(--note-bg, #fef9c3);
  color: #713f12;
}

5. Переключение темы через переменные

Светлая и тёмная карточки — это одни и те же правила. Меняются лишь значения --bg и --text.

:root {
  --bg:   #ffffff;
  --text: #172033;
}
.panel {
  background: var(--bg);
  color: var(--text);
}

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