Tag Archives: css

Choosing and Installing a CSS Preprocessor on Windows

I’ve finally decided to use a CSS Preprocessor to improve my web design workflow. I think the best way to learn what Preprocessors can even help you with is just by reading the comparison articles I’m linking in this post. I’d also not recommend using a CSS Preprocessor until you’ve coded CSS by hand (a lot) first. One thing that stops a lot of designers from using Preprocessors is the dreaded command line. It’s my personal opinion that, even as a visual designer, we need to understand and use the command line, in the same way that I think anyone who uses a computer should computer hardware. It’s just good to know these kinds of things. If you’ve never even opened the terminal on OS X before, The Designer’s Guide to the Command Line (OS X only) will be of great use to get up and running quickly.

If you’re like me, and you have both a Windows and OS X machine, then I’d strongly recommend learning how to use the OS X terminal and then installing Cygwin for Windows. It’s basically a terminal for Windows. Another neat thing is that since OS X and Linux are both Unix-like operating systems, once you’re comfortable using the terminal in one you can use it in the other!

Installing Cygwin on Windows is pretty straight forward. You run an .exe file and it does the rest. Just make sure when you get to the screen where you can choose extra packages that you choose ruby and git (that’s a whole ‘nother post. If you’re interested in CSS Preprocessors you’ll probably be interested in version control too, so you might as well). After Cygwin is installed you should install RubyGems, a package manager for the ruby programming language. Here’s how:

  1. Download the latest RubyGem package .tgz (or tarball, as they call it)
  2. Unzip it into a folder in your downloads folder.
  3. In the Cygwin terminal, navigate to the RubyGems folder in downloads directory. You will probably need to type something like this:

$ cd C:/Users/username/Downloads/RubyGem-versionnumber
Note: Type everything after the $

Now that you’re in the RubyGems folder, type this just to make sure you’re in the right place:

$ ls -la

If you see a file called setup.rb, you’re good! If you don’t see anything except another folder, keep cd’ing into it until you’re all the way in. Once you’re there, type:

$ ruby setup.rb install

If everything worked out you should now have RubyGems installed. As an aside, I’d also like to point out that instead of navigating to the directory that setup.rb was located in, you could have typed the entire path to setup.rb and it would have done the same thing. As a beginner, I find it easier sometimes to just locate the directory first.

The next step is to install your Preprocessor. But which one to choose? I chose SASS because searching for SASS vs. LESS (the two CSS Preprocessors I knew off the top of my head) revealed a nice comparison article from CSS-Tricks. That was enough to convince me, but I’ll probably end up trying LESS at some point too just so I’m able to pick up on a project that already uses it. If you’re still not sure, you can take a look at this Nettuts+ article comparing SASS, LESS, and Stylus.

Installing SASS once you have ruby and RubyGems is easy, simply type:

gem install sass

And there it is! In the next part of this series I will go through how to use SASS for the first time and introduce SASS’ popular helper: Compass.