Getting Compass Modules to Work with Codekit

January 27, 2013

Tweet

If you use SASS you should be using Compass. Compass is a great set of tools and libraries, called modules in Compass talk, that make creating your stylesheets with SASS even easier. Along with Compass’s default modules, Compass makes it easy for developers to create their own modules and to incorporate modules created by other developers; my two favorite third party modules are ‘Modular Scale’ and “Sassy Math”.

If you’re like me you use Codekit to compile and vallidate you SCSS, however, you may have noticed that Codekit has a difficult time with third party Compass modules. It will tell you that the files can’t be found.

THE PROBLEM

Codekit comes packaged with it own version of Compass with the idea of making its users lives “easier”. Third party Compass modules can not be added to this install of Compass.

THE SOLUTION (ALMOST)

The trick is to get Codekit to use a separate install.

If you do a quick google search about this issue you’ll find Codekit’s Help and Documentation page. If you scroll down to where it says compass it says:

“If you install Compass extensions by adding a load/require statement to the beginning of your project’s config.rb file, you must switch CodeKit to use an external Compass compiler in order for that extension to work correctly. Do this by installing Compass at the command line as normal (if you’re using RVM, make SURE you switch it to the standard system location first!) and then go to the Languages pane of CodeKit’s preferences window, select “Compass” and see the “Advanced Compiler Settings” area.”

Which simultaneously sums it up real nicely and not at all. To paraphrase you need to go into the language section of Codekit’s preferences and point Codekit to the right install. However, if you have used RVM to do the install, which I’m positive you have, you won’t be able to find it and you know what that means, its time to open up Terminal, pray, and fiddle around for a while until you stumble on the answer.

Or you can use the guide below which is adapted from the solution for a similar SASS problem as spelled out by Chris Coyier.

THE SOLUTION (REALLY THIS TIME)

1. 1. Open Terminal and type rvm system

   This is the “make SURE you switch it to the standard system location first!” of the Codekit instructions.

2. 2. Next type in “sudo gem install compass”.

   You will now have a fresh download of Compass at /usr/bin/

3. 3. Open CodeKit and open the Preferences window
4. 4. Go to the “Language” tab and select Compass from the sibebar

5. 5. Select “Use the Compass executable at this path:”
6. 6. Click choose and locate you Compass install in the /usr/bin/ directory.

You’re now all set to install and import any Compass modules you want.

If you have any questions or see any gaps in my tutorial please feel free to address them in the comments.

Bugs etc., Code-Kit, CSS, Pre-Processing, SASS, Web Design and Development, Web Tutorials