Как работают CSS переменные

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

Особенности:

• Обладают каскадированием (наследуются)
• Могут быть переопределены в дочерних элементах
• Доступны для изменения через JS
• Работают в медиазапросах

:root {
  --main-color: #06c;
  --padding: 10px;
}

.element {
  color: var(--main-color);
  padding: var(--padding);
}

@media (max-width: 768px) {
  :root {
    --padding: 5px;
  }
}

JS взаимодействие:

// Получить
getComputedStyle(element).getPropertyValue('--main-color');

// Установить
element.style.setProperty('--main-color', 'red');