A quick workflow tip using SASS, Sprite Right and Codekit


  1. Export your spritesheets as a SASS partial
  2. Import the partial into your SASS document
  3. That’s it. Everytime you save your spritesheet, CodeKit automatically processes your stylesheet with your new spritesheet classes.

I use Sprite Right to manage sprites and CodeKit to speed development. Using SASS partials, you can combine these two Mac apps to save a lot of time.

First, using SpriteRight, export your spritesheet as a SASS partial.

I use _sprites.scss. (Note the ‘s’ before ‘css’. The underscore prevents SASS from directly compiling a file, thereby producing an unneeded CSS file.)

  • Click ‘Settings’ in SpriteRight to manage your export settings.
  • Choose your file output path.
  • Select ‘Export example CSS’
  • Set your output path
  • Prefix your filename with an underscore and use the .scss extension.


After saving and exporting, you’ll be asked if you really want to use the .scss extension. (Yup.)





Second, import the partial into your main SASS file.

@import "sprites";

Third, there is no third. On save, CodeKit will

  1. Compile your SASS document importing all of your spritesheet classes.
  2. Refresh your test site in Chrome or Safari
  3. Allow you to admire your work

One thought on “A quick workflow tip using SASS, Sprite Right and Codekit

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s