The CSS preprocessor is a CSS add-on that adds features to CSS that were previously unavailable, using new syntactic constructs.

The main task of the preprocessor is to provide convenient syntax constructs for the developer to simplify, and thereby speed up, the development and maintenance of styles in projects.

CSS preprocessors convert code written using preprocessor language into clean and valid CSS code.

With preprocessors, you can write code that aims to:

• Readability for humans.
• Structured and logical
• Performance

And that’s just a small part of what a preprocessor can give you.

What kinds of CSS Preprocessors are there?
It’s time to move on to more specific examples, namely the CSS preprocessors themselves. At the time of writing, there are three popular preprocessors:

• Less
• Sass (SCSS)
• Stylus

And a few minor players for us:

• Closure Stylesheets.
• CSS Crush

The first three we’ll talk about separately a little later, but the last two will not be discussed at all, due to their unpopularity. If you want, the descriptions of these preprocessors can be easily found on the search engine.