Есть ли опыт работы с переменными в CSS

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

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

• Упрощают поддержку (изменение в одном месте)
• Поддержка тем/скинов
• Работают в runtime (можно менять через JS)

Пример:

:root {
  --primary-color: #3498db;
  --spacing: 16px;
}

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

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

• Каскадируются как обычные CSS-свойства
• Могут иметь fallback: var(--unknown, red)
• Доступны для изменения через JS:

document.documentElement.style.setProperty('--primary-color', 'red')