Что такое CSS-переменная

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

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

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

Пример:

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

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

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

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