Exploring CSS preprocessors

Preprocessors are tools that accept code and compile it. In our context, such instruments output CSS. There are few big benefits of using preprocessors.

• Concatenation: Writing everything in one single .css file is not an option anymore. We all need to split our styles logically and this normally happens by creating a bunch of different files. CSS has a mechanism to import one file from another—the @import directive. However, by using it, we are forcing the browser to create another HTTP request to the server, which can decrease the performance of our application. CSS preprocessors normally deliver only one file by replacing the functionality of @import and simply concatenating all the used files.

• Extending: We don't like to write things over and over again and with pure CSS coding, this happens all the time. The good news is that preprocessors provide a feature that solves this problem. It's called a mixin. We can think of it as a function which is executed and...