A large stylesheet repeats itself: one brand color in forty rules, one breakpoint in twenty media queries. A preprocessor removes that repetition at build time with variables, mixins, functions, loops and modules, then emits ordinary CSS. The cost is a build step, plus source maps (.css.map) so DevTools can show your source lines.
Install compilers per project (npm 2,036 install --save-dev sass less) so CI uses the same version, then run npx sass --watch scss/main.scss:dist/main.css. In Vite 25,978 , import "./main.scss" works once sass is installed.
Reach for a preprocessor for compile-time logic or to customize a Sass-based library; for small sites, native custom properties and nesting plus a postprocessor are often enough.