Friday 29 June 2012

Problematic Install of Ruby (for Sass) on Windows 7 (UPDATED)

I'm between projects at work at the moment so I'm taking the opportunity to have a look at a few things that I haven't had a chance to but have been meaning to for a while. CSS and HTML preprocessors are gradually being talked about more and more in the web dev community. I've had a look a couple of times at the site for Sass, but always been a bit intimidated. This week I watched a video by Chris Coyier talking about Sass (and he also touched on Jade a little), and I was smitten by it right away. Next morning at work I set to installing Sass...

It turns out this isn't something as easy as I expected. On the Mac there are plenty of applications that do all the compiling on the fly without any major set up required, just download and install. I decided to use an application called Scout App on the Mac as it was a highly recommended free piece of software. It's also multi-platform so I downloaded it onto to work Win 7 box, no problem with the install, nice and smooth. Come to run a project, and it goes bang...

UPDATE: There seems to be a problem with the Java installation. Uninstall Scout App and Java, then install Java 6 (at time of writing) and only then reinstall Scout App you should have no problems when trying to run a project.

Whilst I'm trying to get support from the community I decide to tackle things from the command line. The Ruby installation is quite simple, and can be downloaded from the Ruby site. Next to installing gems. It should simply be a case of running cmd for Ruby (there's a shortcut in the Start menu after installation) and typing out gem install sass. My installation though couldn't find the repository, so I had to download the gems manually from the gem repository. From the command line you can then install the gem(s) by running the command gem install --local c:\path-to-gem.

To install sass, all you need is the sass gem. I also wanted to install compass, which has a few dependancies that have to be installed first due to the repository issue I was having. The order of the gems to install for compass is:
  • sass
  • chunky_png
  • fssm
  • addressable
  • css_parser
  • compass
For Haml:
  • syntax
  • maruku
  • yard
  • haml
After all this you need to update the Environment Variable $PATH to point to the Ruby installation bin folder (where the gems are installed) in order to be able to use the new verbs. To do this right click My Computer and go to Properties. From there choose Advanced system settings from the left hand column. The next dialogue that opens will on open on the Advanced tab with two lists. The bottom list find the entry Path, highlight it and click the Edit... button. You want to append to the end of the text already in this field otherwise you're going to create some real problems in your system. Append to the end ; C:\path-to-ruby\bin. The list is a semi-colon deliminated list of paths, hence starting with a semi-colon.

Time to start compiling Sass. Navigate your way on the command line to the folder in which you're storing your .sass file. Run the command sass --watch styles.sass:styles.css to auto compile your CSS file every time you save your Sass file.

There are lots of tutorials out there (which I'm about to go through myself) to get you going in Sass. I hope this post answers some questions that may be thrown up during a tricky install.

No comments:

Post a Comment