clubmate.fi

How to use Compass plugins with CodeKit

Compass has a reset, but no Normalize, nor animation. But plugins can help in that.

We'll look into the animation plugin, and how to install it when using CodeKit. Grab the animation plugin here (just download the zip). Also see a list of Compass plugins here and here.

Put it somewhere in your hard drive

Don't put them inside the CodeKit app, when updated they get overwritten massive forehead slap.

Require the plugin in config.rb file

In your projects Compass config file:

require "/Volumes/HD/Documents/path/to/your/file/lib/animation.rb"

You need to reference the animation.rb inside the lib folder.

You'll get the path easily from Finder: right click the file > Copy Path > Terminal Path.

Import it and use it

In your scss file:

@import 'animation';

// And then use it of course
// This will spin an element around
@include keyframes(rotate) {
  0% {
    @include rotate(0deg);
  }
  100% {
    @include rotate(360deg);
  }
}

Then of course apply the animation to an element.

.circle-thing {
  @include animation(rotate 4s infinite linear);
}

Also, the amazing thing about Animate plugin that you can use all the Animate.css buit in animations. More here.