Переменные

Переменные создаются через символ «--».

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

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

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

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

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

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

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

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

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

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

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