CSS-переменные

CSS-переменные (custom properties) — переиспользуемые значения, определённые через --name и используемые через var(--name). Определяются в :root для глобального доступа. Можно переопределять в контекстах. Делают CSS гибким и легкоизменяемым.

Определение CSS-переменных: :root { --primary: #3498db; --spacing: 1rem; --font-body: 'Inter', sans-serif; }

Использование: .button { background: var(--primary); padding: var(--spacing); font-family: var(--font-body); }

Значение по умолчанию: color: var(--text, #333); /* Если --text не определён, использует #333 */

Переопределение: .dark { --primary: #2980b9; --bg: #1a1a2e; } /* Все элементы внутри .dark используют новые значения */

Каскадирование: CSS-переменные наследуются и каскадируются как обычные свойства!

Динамические значения: С помощью JavaScript: element.style.setProperty('--primary', '#e74c3c');

Преимущества:

• Один источник правды (DRY)
• Легкая смена темы
• Переопределение в контексте
• Динамические значения через JS

CSS-переменные — как настройки в игре. --primary: синий — базовый цвет. В .dark: --primary: тёмно-синий — другой скин. Всё остальное (кнопки, ссылки) автоматически меняется!

**Самый простой:**

:root {
  --color: #333;
  --bg: white;
}

body {
  color: var(--color);
  background: var(--bg);
}

.dark {
  --color: #fff;
  --bg: #1a1a2e;
}

Базовые переменные и тема dark.

**Простой:**

/* Дизайн-система */
:root {
  /* Цвета */
  --primary: hsl(210, 80%, 50%);
  --primary-hover: hsl(210, 80%, 40%);
  --text: hsl(220, 15%, 20%);
  --text-muted: hsl(220, 10%, 45%);
  --bg: hsl(0, 0%, 98%);
  --border: hsl(220, 15%, 88%);

  /* Отступы */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* Тени */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
}

.card {
  padding: var(--space-lg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.btn-primary {
  background: var(--primary);
  padding: var(--space-sm) var(--space-md);
}

.btn-primary:hover {
  background: var(--primary-hover);
}

Дизайн-система с переменными для цветов, отступов и теней.

**Реальный пример:**

/* Полная тема */
:root {
  --color-primary: hsl(210, 80%, 50%);
  --color-bg: hsl(0, 0%, 100%);
  --color-text: hsl(220, 15%, 15%);
  --color-surface: hsl(0, 0%, 98%);
  --shadow: 0 1px 3px rgba(0,0,0,0.1);
  --radius: 8px;
  --transition: 0.2s ease;
}

.dark {
  --color-primary: hsl(210, 80%, 60%);
  --color-bg: hsl(220, 20%, 10%);
  --color-text: hsl(0, 0%, 90%);
  --color-surface: hsl(220, 20%, 15%);
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Контекстное переопределение */
.card-accent {
  --color-primary: hsl(35, 100%, 55%);
}

.card-accent .btn {
  background: var(--color-primary);
}

/* JS-динамика */
.progress-bar {
  width: calc(var(--progress, 0) * 1%);
  background: var(--color-primary);
  transition: width var(--transition);
}

/* Вычисления */
.spacing-component {
  padding: calc(var(--space-md) * 1.5);
  margin-bottom: var(--space-lg);
}

Полная тема: dark mode, контекстное переопределение, JS-динамика.

**Неправильно:** Не использовать CSS-переменные

**Почему:** Хардкод значений = правки в 20 файлах при смене темы. Переменные = один источник правды.

**Правильно:** Определите базовые значения в :root и используйте var() везде.

**Неправильно:** Путать CSS-переменные и Sass-переменные

**Почему:** Sass-переменные ($var) — компилируются в CSS. CSS-переменные (--var) — работают в браузере, динамические.

**Правильно:** CSS-переменные (--name) — runtime. Sass-переменные ($name) — build time.

**Неправильно:** Забывать значение по умолчанию

**Почему:** Если переменная не определена, свойство не применяется.

**Правильно:** color: var(--text, #333); — fallback, если переменная не найдена.

• :root { --name: value; } — определение переменных
• var(--name) — использование переменных
• var(--name, fallback) — значение по умолчанию
• Переменные наследуются и каскадируются
• Переопределение в контексте (.dark { --primary: ... })

Назад: Вы знаете псевдо-классы и псевдо-элементы (C17) — переменные делают динамические стили поддерживаемыми.

Вперёд: В следующем уроке (C19) вы изучите стилизацию форм: кнопки, поля ввода и кастомные контролы.