- Export your spritesheets as a SASS partial
- Import the partial into your SASS document
- That’s it. Everytime you save your spritesheet, CodeKit automatically processes your stylesheet with your new spritesheet classes.
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.
Third, there is no third. On save, CodeKit will
- Compile your SASS document importing all of your spritesheet classes.
- Refresh your test site in Chrome or Safari
- Allow you to admire your work