В чем заключается отличие переменных в CSS от переменных в препроцессорах?

Переменные в препроцессорах (Sass, Less, Stylus) обрабатываются до компиляции в CSS. Они позволяют хранить значения, использовать их в вычислениях и применять с помощью директив (@mixin, @function), что делает CSS более динамичным и модульным.

CSS-переменные (custom properties), объявленные с помощью синтаксиса --variable-name, обрабатываются браузером во время выполнения (runtime). Их значения могут изменяться с помощью JavaScript, что полезно для создания динамических тем или изменения стилей в зависимости от состояния элемента.