Переменные

Переменные создаются через символ «--», и используются в селекторах через ключевое слово var().

:root {
  --error-color: red;
}

.error {
  color: var(--error-color);
  /* другие свойства */
}

.invalid {
  color: var(--error-color);
  /* другие свойства */
}

Имена переменных регистрозависимы, т.е. переменные «--error-code» и «--Error-code» это две разные переменные.

Переменная доступна только в дочерних элементах. Если переменную создать для тега <header>, то она будет доступна только в её дочерних объектах.

Переменную нельзя использовать как часть выражения.

/* не правильно */
:root {
  --size: 16;
}

p {
  font-size: var(--size)px;
}

/* правильно */
:root {
  --size: 16px;
}

p {
  font-size: var(--size);
}

Пример использования переменных, это реализация переключения тёмной и светлой темы сайта.

Значение по умолчанию

Значения по умолчанию указываются во втором атрибуте.

/* Если переменной нет, применяется значение "red" */
.error {
  color: var(--error-color, red);
}

Ключевое слово var() принимает два атрибута (имя переменной и значение по умолчанию). Всё, что идёт после первой запятой и до закрывающейся скобки, воспринимается как значение по умолчанию.

.error {
  color: var(--error-color, red, green);
}

На примере выше, CSS будет воспринимать значение по умолчанию как «red, green».

Правила именования переменных

Переменные могут начинаться с любого алфавитного символа (в том числе русского), чисел, тире и нижнего подчёркивания.

/* Правильно */
:root {
  --name: red;
  --_name: red;
  --5name: red;
  ---name: red;
  --имя: red;
}

/* Не правильно */
:root {
  --@name: red;
  --!name: red;
}