A quick workflow tip using SASS, Sprite Right and Codekit

TL;DR

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