Lingering Misconceptions on CSS Preprocessors

Chris Coyier //

I recently received this email from a reader who is just getting started as as front end developer and wanted to get into CSS preprocessing. It has a few common misconceptions in it that I hear quite often. So, blog post.

I'm still not keen on LESS. The fact that it requires adding more JavaScript to my pages puts me off. Sass seems a lot more user friendly. After reading your article I'm even more convinced. The only issue I have is the installation. To install Sass I needed to install Ruby, and to install Ruby I needed to install git, and to install git I needed to install the oskeychain helper... Gor someone who is very new to using the command line, this was an awful way to get something so useful installed.

Let's start with this one:

I'm still not keen on LESS. The fact that it requires adding more JavaScript to my pages puts me off.

LESS is written in JavaScript. It does allow you to <link> up .less files and load the LESS compiler in a <script> and it will process them "on the fly." But you should never use it that way, except in really specific testing situations. You should use LESS to preprocess CSS and <link> up the .css files it creates.

The "pre" part of preprocessing you can think of as "before you send these files to the live website."

When the speed of LESS vs. Sass is considered, it's just in how fast they can preprocess the files and turn them into CSS. It's just an authoring convenience to have it have it fast. It doesn't affect your live site.

And then this one:

To install Sass I needed to install Ruby, and to install Ruby I needed to install git, and to install git I needed to install the oskeychain helper...

Oi! That stuff can make my head spin too. Fortunately you don't have to go through all that. Download CodeKit, have it watch your project folder, done. If you're a Windows user, try the LiveReload alpha. I'm not saying you should avoid the command line, but I am saying an app for preprocessing makes things way easier and better.