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

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

CSS:

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

Sass:

$main-color: #ff0000;
.element {
  color: $main-color;
}

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

• CSS переменные работают в браузере, Sass - только на этапе компиляции
• CSS переменные можно изменять динамически (например через JS)
• Sass переменные поддерживают сложные операции, миксины