What Is CSS preprocessor ?

It is not until recently that I started hearing the term CSS preprocessor. It got interested. After all CSS is already very simple. What does a preprocessor do ?

Preprocessors compile the CSS code we write in a processed language to the pure CSS syntax we’re all used to. If you’ve recently considered using a CSS preprocessor, there’s no better time to dive in with all the options and helpful tools available.

Source: Team Tree House Blog

In its basic form, CSS preprocessor is a language that generates CSS stylesheet file for you. Hand-coding CSS is a repetitive process. There are elements that use the same style. So, CSS preprocessor comes in handy to eliminate those repetition.

Does not that means it adds more complexity to the simple CSS ? Yes, it does. But it comes with the advantage of writing less code and believe me, for large websites it does matter.

Other than reducing repetition, CSS preprocessor also allows us, developers more control over CSS, with variables, functions and mixins, as well as other features.

I have to admit there are times when I wish I can drop a variable into a CSS file so I do not have to write javascript code to change the styling of an element. For example, it will great to change a theme using one CSS and change the entire background color directly, instead of writing multiple CSS file that only differ in background color property.

Two very popular CSS preprocessor are SASS and LESS. Both generate good CSS and have large communities supporting them.

There are drawbacks to this method of course. One of them being less than optimized CSS. So, instead of us writing the repetition, the preprocessor does the repetition. For example:

A lot of developers don’t check the produced CSS. I mean, you may have really good looking SASS files, but what’s used in the end is the compiled .css file. If it is not optimized and its file size is high, then you have a problem. There are few things which I don’t like in both preprocessors.
Let’s say that we have the following code:
// LESS or SASS
p {
font-size: 20px;
}
p {
padding: 20px;
}
Don’t you think that this should be compiled to:
p {
font-size: 20px;
padding: 20px;
}

Source: Tutsplus

So, in summary, a CSS preprocessor gives us more control and less repetition on code. However, it can also produce less than optimized CSS file.

Whether you decide to use CSS preprocessor or not is up to you. But many people use it, so it must be useful. At least give it a try.