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

CSS переменные (custom properties) объявляются через -- и доступны в DOM, их можно изменять динамически через JS. Препроцессорные переменные (Sass/Less) существуют только на этапе компиляции.

CSS переменные:

:root {
  --main-color: #06c;
}
.element {
  color: var(--main-color);
}

Sass переменные:

$main-color: #06c;
.element {
  color: $main-color;
}

Ключевые отличия:

1. CSS переменные можно изменять через JS (document.documentElement.style.setProperty())
2. Препроцессорные переменные исчезают после компиляции
3. CSS переменные наследуются и каскадируются
4. Препроцессоры поддерживают сложные операции с переменными (математика, функции)