CSS Preprocessors

You've probably already heard of CSS preprocessors by now, but haven't quite plucked up the courage to try one because of the learning curve, or maybe because “preprocessor” just plain sounds intimidating. So let's put those uncertainties at ease and go over what preprocessors are, how they work, and which one you might choose. In this article, we'll discuss the 3 most popular ones: Sass, LESS and Stylus.

What's a Preprocessor?

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.

Until recently, there was a lot of resistance from developers who argued that preprocessors steered too far from pure CSS, added more layers of complexity and that “If it's not broken, don't fix it.” But lately, many have realized just how powerful preprocessors can make our CSS.

Why Use One?

There are various reasons why CSS preprocessors can be a valuable tool in our development process. First, they don't break browser compatibility; LESS, Sass and Stylus are all valid CSS and vice versa. Another advantage is preprocessors make our CSS DRY (Don't Repeat Yourself) by allowing us to create variables from reusable CSS properties, which makes our code more modular and scalable, so our CSS doesn't get out of hand and become difficult to manage.

Preprocessors save us time and do a lot of the tedious stuff for us because they have all the neat features we wish plain vanilla CSS had, like nesting selectors, math functions, referencing a parent selector, even reporting errors by telling us where and why there are errors in our code.

The following are helpful tools that do most of the heavy lifting for you.

• CodeKit
• LiveReload
• SimpLess

Conclusion

Hopefully now you're feeling more confident about using a CSS preprocessor. When in doubt, you can always fall back to plain CSS in your preprocessor file. Remember that you're not learning an entirely new language—just a new syntax.