Grow your CSS skills. Land your dream job.

Can you use compass gems with codekit?

  • # November 5, 2012 at 11:38 pm

    And if you can, please guide me!!!! I’m going on day 2 banging my head, reading more and more documentation…

    The gems are hanging out in /Library/Ruby/Gems/1.8/gems/../.rb

    Codekit’s documentation says to add
    require “/Library/Ruby/Gems/1.8/gems/../gemname.rb”;
    to the config.rb file. I see some documentation saying use @require “/pathname”;

    No matter what, codekit throws an error when I try and import the gem
    ex:

    error about.scss (Line 3 of _flash.scss: File to import not found or unreadable: compass/css3/animation.
    /Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/blueprint/stylesheets
    /Applications/CodeKit.app/Contents/Resources/engines/compass/frameworks/compass/stylesheets
    /Library/Ruby/Gems/1.8/gems/animate-0.2.beta.0/stylesheets
    Compass::SpriteImporter)

    line 3 of _flash.scss is:

    @import “compass/css3/animation”;

    I feel as though installing these gems through terminal is putting them in a seperate location than the install of compass codekit uses, though there is an installation of compass in my gems folder…

    This is all getting rather convoluted… Also ignore the name of that gem… That was just an example. I have tried multiple others out of curiosity with the same result.

    Hope this makes sense! Thanks.

    # November 23, 2012 at 4:57 pm

    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.

    # March 16, 2013 at 12:01 am

    This was super easy to include additional Compass plugins. See this guide here for setting up the config
    http://blog.grayghostvisuals.com/css/installing-compass/

    Look for the heading “COMPASS FRAMEWORKS & EXTENSIONS” midway down the page.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".