CSS pre-processors have really started to gain in popularity in the last several years. It have been around for a while now. We need a compiler to compile that. It means we can't render directly to pre-processors file (scss ,less, styls). In simple word we can write more code in some line, that will save extra file size.

Why we use it ?

There are many reasons that to use it, CSS preprocessors can be a valuable tool in our development process. LESS, Sass and Stylus are all valid CSS. they dont break browser compatibility. Advantage is, preprocessors make our CSS to not Repeat Yourself means allowing us to create variables from reusable CSS properties, which makes our code more modular and scalable, so our CSS doesn't get out of hand and it will not become difficult to manage.

Some popular CSS preprocessors -

Sass ,Less, scss, Stylus, Myth etc.