We were reviewing some of the most basic CSS concepts, just to refresh our knowledge about the syntax and elements that compose a style sheet. In the real world, a style sheet could have more than 20 classes belonging to one HTML page; in extreme cases, these classes could be one hundred or more. In these cases, maybe you will find CSS syntax very primitive, not auto-explanatory, and incomplete in some cases. It's hard to implement inheritance on big systems and over time, it could become hard to maintain.
You can apply different approaches in order to write better CSS code, you can define different classes for each web page and then import them on one single CSS file, or maybe you could define parent classes and apply inheritance to child elements, but, in both cases, you will need to deal with maintainability problems.

It's just for the reason that in order to write better CSS code, reuse code in an effective way, and add some extra approaches to make it more dynamic and understandable to any developer, CSS preprocessors become a very used tool for any developer, increasing their productivity and drastically reducing the amount of code in our style sheets.
As we can expect, each CSS preprocessor has its own syntax, not too different and not hard to learn. All of them support classic CSS; the extra features will be explained as we move on using the two most used tools nowadays—SASS and LESS.