В чём разница между переменными в CSS и в препроцессорах?

Главное отличие — время жизни: CSS-переменные работают в браузере, переменные препроцессоров (Sass, Less) существуют только при сборке.

Сравнение

• CSS-переменные — Синтаксис: --color и var(--color); Когда вычисляются: в браузере; Каскад и наследование: да; Изменение из JS: да; В медиазапросах и именах селекторов: нет
• Sass / Less — Синтаксис: $color / @color; Когда вычисляются: при компиляции; Каскад и наследование: нет; Изменение из JS: нет; В медиазапросах и именах селекторов: да

:root { --gap: 8px; }
@media (min-width: 768px) { :root { --gap: 16px; } }
.grid { gap: var(--gap); }

С CSS-переменными адаптивность и темы делаются без дублирования правил: меняется одно значение, а все места его использования обновляются.

Когда что выбрать

• темы, динамика, значения из JS — CSS-переменные;
• константы для генерации кода и вычислений при сборке — препроцессор.

Коротко для собеседования

CSS-переменные — в рантайме, с каскадом и доступом из JS; переменные препроцессора — константы сборки, но работают в медиазапросах и генерации кода.

Подробнее: MDN — Custom properties