The easiest way to get started is with a Mac OS X application called CodeKit. I don't get kickbacks from the maker of this app. It's just a solid, simple app that does tons of stuff that used to be kind of a pain. It's not that expensive and you can get it at http://incident57.com/codekit/.

If you use anything other than a Mac, you are sadly out of luck as this app is for Mac only.

Once you've downloaded and launched it, it is trivial to add a project. The app is smart enough to find all the files in your project; more precisely, the files that fit into these categories are stylesheets, scripts, pages, and images.

CodeKit will preprocess all of these things in various ways; it will even optimize your images for you. As much as I am a fan of the command line, the convenience of this app has really won me over. I am trying to avoid gushing here but it will also do things such as preprocess haml and run JSLint or JSHint; it concatenates and minifies all your JavaScipt, optimizes the images, and has many features, which I won't go deep into.

But, we are not here right now to use all those things; we are here to discuss how it facilitates the preprocessing of LESS and Sass. I am going to continue to describe how to set this up with the assumption that you don't own this app yet but just want to know more about how it works and, more specifically, how it works with 320 and Up. If you are using 320 and Up, and already have all your project files where they should be, you don't have to do much of anything else to get started. Just make sure that you select the appropriate file that essentially pulls in all the other files, and make sure it outputs the right file to the right location. Since CodeKit has an easy UI, all you have to do is right-click on 320andup-scss.scss (for example, there is an equivalent file for LESS and the others) and set the output path, filename, and so on. That's just about it. Now let's look at some command-line tools.

Compass is a command-line tool that is community-driven. There are also GUIs for it. I have less experience with it, but there are lots of tutorials and guides on their site if you want to give it a go: http://compass-style.org/. Compass is a Ruby gem, so you can install and run it easily on the command line. Compass won't process LESS. But the LESS preprocessor is pretty simple to set up with the Node package manager.

This solution is similar to using Compass. You install a gem on the command line with a simple configuration. Just as with the previously mentioned Compass and CodeKit, it will look for file changes and process your preprocessed code. I've had issues with LESS for successfully looking out for any code changes.

So, this is technically a fourth way and it's a bit redundant to mention Rails as a way to preprocess CSS but you can use any of the previously mentioned gems within a Rails project. The Sass gems will watch for code changes and process them without any further interaction. Again, in the past I've had issues getting LESS to watch for file changes and I had to restart the server to get it to process the code. This is unacceptable to me, since it just gobbles up time. On the other hand, things may have been fixed by now but I have moved on to Sass for additional reasons, some of which I previously outlined.

We will move on to what is happening in the preprocessed code itself in a moment, but I just want to tell you that, if you are intimidated by command-line tools, don't be. I entered this profession starting out mainly as a graphics guy, and have come to love the simplicity and elegance of the command line. There are many simple beginner courses that are free or are very cheap online and that will help you to get over your fears or confusion. I am a fan of the Learn the Hard Way tutorials, but there are tons more, and there will continue to be more. Once you know your way around the command line, I can assure that you will be able to work more efficiently than before.