Not sure if you’ve resolved this yourself by now, but I had this same problem (and a few others with gems on my Mac) and I managed to fix it pretty easily.

If you’ve googled enough or seen a few questions on Stack Overflow, you’ve probably read that Codekit uses it’s internal version of whatever pre-processor you’re using, and doesn’t have any relationships with the gems installed on your machine. You don’t have to go into the command line and install Compass, Sass, LESS or _anything_ to start using Codekit, it brings it’s own to the party. You can see in the shit in that error you provided, that it couldn’t find the gem you want and it’s looking for it _inside_ the application itself – obviously it ain’t going to find it because it ain’t there.

Anyway, I fixed the issue you seem to have by going into the Codekit preferences (I’m using **version 1.3.5**), into the **Languages** tab, then selecting **Compass** and under the **Advanced Compiler Settings** I told it to use the Compass gem I have installed on my machine by navigating to it after hitting the **Use the Compass executable at this path:** option, rather than using the internal one. It should be stored in **/usr/bin/**

I don’t think you need to restart the app after doing this but I do it anyway just to make sure. You can check which versions of things Codekit is using by opening the **About Codekit** window from the toolbar.

Doing this also gives it access to any other gems/plugins you may have installed that you might wanna use with Compass as a @require, like the [Susy grid framework](http://susy.oddbird.net/) or the Compass port of [Dan Eden’s animate.css by Eric Meyer](https://github.com/ericam/compass-animate). Only mentioning those because I use them a lot :)

That worked for me – telling Codekit to drop it’s internal stuff and use yours. Codekit uses the latest stable release of whatever it is you’re using, in this case Compass. I’d suggest having the latest pre-release version of Compass installed on your machine with:

gem install compass –pre

which is useful if you want to use the new animation mixins in that version of Compass, and you can switch between this and the internal compiler as you like.

Alternatively, I would _highly_ recommend using [Bourbon](http://bourbon.io/) – it’s a Sass mixin library. While Compass is awesome, it’s not too great if you want to use things like **animation**, **user-select** or **HIDPI media queries**. It’s also not great with the @font-face rule. Bourbon handles all of these and a shit load others perfectly and is included with the latest version of Codekit.

**Be aware though**, if you have Codekit pointing to _your_ version of Compass rather than it’s internal one, and you’d like to create a new Compass project using the app you **must** go into the preferences and tell it to use it’s internal compiler **then** create your project, otherwise the app will just make an alert noise without actually telling you what went wrong and your project wont get created, which is pretty shitty. After you’ve done that and made your project then you can go change it back and use your local version. I’m not sure whether the developer knows about this bug, but it’s been like that since I started using the app a few versions ago.

Sorry if this is a bit long-winded but hey – it worked for me. If you want to use gems/plugins with Codekit, you need to use your local version.

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.