var

var — функция для подстановки значения CSS-переменной (custom property). Принимает имя переменной и опциональный fallback.

Зачем нужно

var — единственный способ использовать CSS-переменные в значениях свойств. Она позволяет создавать настраиваемые, переиспользуемые стили и поддерживает fallback-значения для надёжности.

Где используется

  • Подстановка любых CSS-переменных
  • Fallback-значения при отсутствии переменной
  • Вложенные fallback-цепочки
  • Внутри calc, min, max, clamp и других функций

Предпосылки

Синтаксис

.element {
  /* Базовое использование */
  color: var(--text-color);
  padding: var(--spacing-md);

  /* С fallback */
  color: var(--text-color, #333);
  background: var(--bg, white);

  /* Вложенный fallback */
  color: var(--theme-color, var(--default-color, black));
}

Fallback-значения

Fallback используется когда переменная не определена (нет в цепочке наследования):

.button {
  /* Если --btn-bg не определена → используется #007bff */
  background: var(--btn-bg, #007bff);

  /* Fallback может быть сложным значением */
  box-shadow: var(--btn-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));

  /* Всё после первой запятой = fallback (включая запятые) */
  font-family: var(--font, Georgia, serif);
  /* fallback = "Georgia, serif" */

  background: var(--gradient, linear-gradient(to right, #007bff, #00d4ff));
  /* fallback = "linear-gradient(...)" */
}

Когда fallback НЕ работает

:root {
  --size: red; /* Определена, но невалидна для width */
}

.box {
  width: var(--size, 100px);
  /* --size определена → fallback НЕ используется
     Но "red" невалидна для width → width = initial (auto)
     Fallback 100px НЕ применяется! */
}

Fallback срабатывает только когда переменная не определена. Невалидное значение — это не «не определена».

var внутри функций

.element {
  /* В calc */
  width: calc(100% - var(--sidebar-width, 250px));
  padding: calc(var(--spacing) * 2);

  /* В clamp */
  font-size: clamp(var(--min-font, 1rem), 2.5vw, var(--max-font, 2rem));

  /* В min / max */
  width: min(var(--max-width, 1200px), 100%);

  /* В color functions */
  background: oklch(var(--lightness, 50%) var(--chroma, 0.15) var(--hue, 250));
}

Цепочки fallback

.element {
  /* Попробовать --custom, затем --default, затем литерал */
  color: var(--custom-color, var(--theme-color, var(--default-color, #333)));
}

/* Практический пример: компонент с настройкой */
.alert {
  background: var(--alert-bg, var(--surface-color, #f8f9fa));
  color: var(--alert-color, var(--text-color, #333));
  border-color: var(--alert-border, var(--border-color, #dee2e6));
}

Паттерн: компонентные API через var

/* Компонент определяет «API» через переменные */
.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--btn-padding-y, 10px) var(--btn-padding-x, 20px);
  background: var(--btn-bg, #007bff);
  color: var(--btn-color, white);
  border: var(--btn-border, none);
  border-radius: var(--btn-radius, 6px);
  font-size: var(--btn-font-size, 1rem);
}

/* Варианты переопределяют переменные */
.button-large {
  --btn-padding-y: 14px;
  --btn-padding-x: 28px;
  --btn-font-size: 1.125rem;
}

.button-danger {
  --btn-bg: #dc3545;
}

.button-outline {
  --btn-bg: transparent;
  --btn-color: #007bff;
  --btn-border: 2px solid #007bff;
}

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

  1. Пробел перед значением в getPropertyValue — JS возвращает #007bff (с пробелом):
    getComputedStyle(el).getPropertyValue('--color').trim()
  2. Fallback не срабатывает при невалидном значении — см. выше
  3. Нельзя собрать имя свойства:
    /* ОШИБКА */
var(--prop-name): 20px;
  4. Нельзя собрать единицу измерения напрямую:
    :root { --n: 20; }
/* ОШИБКА */
width: var(--n)px;
/* ПРАВИЛЬНО */
width: calc(var(--n) * 1px);

Практика

  • Использовать var для цветов, отступов и шрифтов
  • Создать fallback-цепочку из 3 уровней
  • Использовать var внутри calc и clamp
  • Создать компонент с API через CSS-переменные
  • Проверить поведение при невалидном значении переменной

Связанные темы

Ресурсы