What are CSS preprocessors?
CSS is the language used to make the web beautiful. Preprocessors can be used to help make CSS more beautiful.
CSS preprocessors extend the basic functionalities, overcoming many limitations of traditional CSS by adding features such as variables, nesting selectors and mixins, creating CSS that is more maintainable and efficient.
CSS written in a preprocessed language must also be converted or compiled into traditional CSS syntax. There are many apps that can be used to do this and will be discussed further in this article.
Why make CSS more complicated?
I have to admit, I resisted at first as well. I didn’t want to make CSS *more complicated*. However, once you get up and running, it’ll be hard to go back to writing regular CSS. The great thing about preprocessors is you can use as little or as many features that you want. So the learning curve is only as steep as you want it to be.
Getting started with even just the basic features will greatly improve your workflow.
There is one thing I’d like to point out. If you are a CSS newbie, it might make more sense to get more comfortable with CSS and best practices first before diving into using preprocessors. A tip for anybody starting out with preprocessors is to look at the CSS that is being compiled to make sure you are still following best practices.
Which one should I choose?
Ask any web developer and you’ll hear passionate arguments as to which one is better but at the end of the day, it’s a personal choice. My advice is try a couple and figure out which one you works for you. Each tool may have specific features that the others don’t have but the basics and syntax is similar making it easier to learn the others once you have one under your belt.
Personally, I started with Less because I found the documentation easier to read and am now using Sass, mostly because a project I was working on was already using Sass and now I just prefer it!
This article will go over the basics of getting up and running with Sass or Less (sorry Stylus, maybe next time).