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

CSS-переменные (custom properties) живут в браузере и меняются во время работы, а переменные препроцессора (Sass $var) существуют только при сборке и заменяются значениями.

CSS-переменные

:root { --primary: #0066ff; }
.dark { --primary: #4d94ff; }
.button { background: var(--primary); }

• каскадируются и наследуются — можно переопределить для части страницы;
• меняются из JavaScript: el.style.setProperty('--primary', 'red');
• подходят для тем, адаптивных значений, данных из JS.

Переменные Sass

@use 'sass:color';
$primary: #0066ff;
.button { background: color.adjust($primary, $lightness: -10%); }

• после компиляции превращаются в обычные значения;
• можно использовать в вычислениях на этапе сборки, в медиазапросах, именах селекторов;
• не знают о DOM и не меняются в браузере.

Как сочетать

Значения, которые меняются (темы, состояния), — в CSS-переменных; константы для генерации CSS (брейкпоинты, карты цветов) — в Sass.

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

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

Подробнее: MDN — Использование CSS-переменных