Что такое CSS-переменные (Custom Properties)

Ответ

CSS-переменные (Custom Properties) — это пользовательские свойства, которые позволяют хранить значения для повторного использования в CSS. Они объявляются с префиксом -- и доступны через функцию var().

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

Упрощают поддержку кода (изменение в одном месте).
Поддерживают каскадирование и наследование.
Могут изменяться динамически через JavaScript.

Пример:

:root {
  --primary-color: #3498db;
}

.button {
  background-color: var(--primary-color);
}

Изменение через JS:

document.documentElement.style.setProperty('--primary-color', '#e74c3c');