Getting CodeKit and Zen Grids to Play Nicely*

*Sorry, but this will require using the command line.

I think at this point it is pretty obvious that I prefer a GUI over the terminal any chance I can get. That is why CodeKit and I were made for each other. I have just recently jumped on the Sass bandwagon/trend and am trying to learn all the tools that go with it. So of course when I found Sass, I also found Compass. The last thing I wanted to do was install these via the terminal. I use a Mac, and while I saw that it was very minimal to do this with the command line and Ruby gems, simple it may be, it was still against my principals none the less. This is where CodeKit came into play. Woot! I now easily had Sass, Compass, and a watched project, all using my best friend — the mouse.

Then came along Zen Grids, a Sass-based responsive grid system. This was something I wanted to learn and take advantage of in our theming work. Looking at the Zen Grids site it said it was as simple as:

gem install zen-grids

This is, of course, assuming you have Sass and Compass already installed. And I thought to myself "Of course I have those installed. I'm using it right now." Well, not so fast. CodeKit runs its own self-contained internal version of these Ruby gems. Although these main gems (Sass and Compass) are no different than the regular ones, having them inside of CodeKit's own little universe makes things a bit more complex when using even more 3rd party gems with Sass. I found this out after I ran this simple command (insert apology here) because I could find no other way to install it. The command ran smoothly and I was excited to think I had Zen Grids installed and ready to go.

I opened up my Compass project and edited the config.rb file as Zen Grids requires you add this to it:

require 'zen-grids'

Simple enough, then just include this in your .scss file:

@import "zen";

Now I can start building grids like nobody's business! That was until I hit save and got a dreaded ".scss did not compile" error from CodeKit. So what do you do now? The obvious, Google the problem. These are the articles that got me to figure out my solution but none of them solved it exactly as it did for each writer:

The first link is what made me realize this is an issue and not just me, but the first command he recommended running did not work for me, so I continued on with my searching. The second article made me understand the fact that CodeKit runs on internal installs of Sass and Compass and that was more then likely my issue. That article points to an image that shows where to configure the paths for Sass in CodeKit (under Preferences > Languages > Sass), and how to point it to a version of Sass installed via command line, which I avoided since I am using CodeKit, and wanted to avoid the command line in the first place.

Now I noticed a few other sites that pointed this out and all of them pointed to /usr/bin/sass which was a path I had on my system. So I changed it to that and tried again to create some grids, but I found that I was still getting errors when compiling the .scss file. After quitting apps, refreshing apps, pulling out my hair, I went back to Google. It was the third link that showed me a different path for the installation of Sass. I navigated to that path and found Sass and Zen Grids there. So I pointed CodeKit to that but was still getting errors. I decided to break down and install Sass and Compass yet one more time, this time with the command line, using these commands:


gem install sass
gem install compass


After what appeared to be a successfull installation I tried one more time to compile my .scss file. Argggggg! I took a look around and found that you can also point CodeKit to an external Compass install and luckily I knew right where that was (on the same Preferences > Languages, under Compass).

Now that I had this in place I compiled one more time and finally everything was working and I was on my way to creating some Zen Grids. I have no idea what these paths are all about and why some are different. Perhaps it is due to different Mac OS versions or different users on the Mac. All I know is that I now have Zen Grids working and I can still use CodeKit to create Compass projects, have them watched, reload, and working like a champ.