CSS preprocessor

What is a CSS preprocessor?

The term can be intimidating for first-timers but breaking it down and understanding each part can provide a tremendous benefit in your CSS endeavors.

The CSS part in the full term clues us to the fact that it has something to do with stylizing.

The Preprocessor part means that a transformation or a conversion will occur.

It still looks a little hazy so shall we see the textbook definition?

As per the MDN website, a CSS preprocessor is "... a program that lets you generate CSS from the preprocessor's own unique syntax."

That was a long definition. Shall we break it down?

A CSS preprocessor is a program that takes a CSS-like language and compiles it into CSS.

A preprocessor language is a CSS-like language with additional features.

Here is a great visual that showcases this:

The green square labeled "Less" is the preprocessor language.
The black device is the CSS preprocessor.
And lastly the pink square is our good ol' CSS.

Why is it useful?

CSS preprocessor languages extend the capabilities of CSS with additional features that make life easier for developers.

Here are some of the benefits it offers:

CSS is made more maintainable.
Easy to write nested selectors.
Variables for consistent theming.
Can share theme files across different projects.
Mixins to generate repeated CSS.
Contains features like loops, lists, and maps can make configuration easier and less verbose.
Splitting your code into multiple files.

Minor inconveniences

There are some minor inconveniences that should be known about.

The first is the need to install a separate program. Most CSS preprocessor languages require the installation of an application that runs in the background and constantly checks to see if the preprocessor language has changed in order to convert it to regular CSS. Some users might consider this a hassle because it takes up disk and memory storage.

The second is the processing time. There is a slight delay when it comes to compiling a preprocessor language into regular CSS.

However, if you're able to see past these inconveniences you'll be able to fully utilize all of the features that are offered with CSS preprocessors.

Example usage

A feature that I used quite often is the calculation capabilities of CSS preprocessor languages. With the LESS preprocessor language, I am able to do easy calculations by utilizing the "/" syntax. For example, if I had an h2 element and I wanted to set the margin to 32px, I would divide 32 with the font size of the h2 which is 16. As a result I would get 2em.