CSS Preprocessor - Don't use them

CSS Preprocessors are a technology invented to overcome the short coming of CSS. The idea being that you define things in one place in the format of the CSS preprocessor instead of having to duplicate the same information in multiple places if one was writing “raw CSS”.

CSS pre-processors are an unnecessary complication and obfuscation in 2021 if one is building a modern web application and not worried about supporting legacy web browsers. There are different ways of solving the same problems using plain CSS that CSS preprocessors try to solve.

It makes it harder to use the built in CSS debugging tools in the browser.

It’s a bad idea much the same way that typescript is a bad idea.

See Sass: Syntactically Awesome Style Sheets and You Might Not Need Sass: Modern CSS Techniques.

Another way of thinking of CSS pre-processors is that they made sense when CSS itself lacked features like variables. Just in the same way that jQuery fixed a historical problem.