==========================
While building Tagit's website, I came across the need to use compass sprites with hover states on normal and retina devices. Not being able to find anything that would suite my needs, I forked a gist from this Gist and added hover & active parameters. Big thanks to thulstrup and rstacruz!!
I've provided a demo folder with working sample buttons.
I created a drop in utility mixin to allow compass to automatically create sprites for normal and retina devices, and also providing hover and active states.
- Generate Normal & Retina Sprites
- Optional Hover & Active States
- Optional Sprite Spacing/Padding
Drop _retina-sprites.scss into your preferred location and link @include it into your main CSS file. I prefer to drop it into a utilities folder with other commonly used helpers.
@import "utilities/retina-sprites";
Create two folders in your images folder. For my example I've created "sprites" for 1x sprites and "sprites-retina" for 2x sprites. In my example I've also created a subfolder called buttons to sprite these as a group. Drop your photo's in these folders, they should have the same file name.
In your SCSS file, declare where your sprites are located. In this example I have my buttons in a separate scss file, and I place the following in the top of this file.
$sprites: sprite-map("sprites/buttons/*.png"); // import 1x sprites
$sprites2x: sprite-map("sprites-retina/buttons/*.png"); // import 2x sprites
If you would like to add padding to your sprites, use the spacing parameter and double the value for the retina version:
$sprites: sprite-map("sprites/buttons/*.png", $spacing: 10px); // import 1x sprites, 10px padding
$sprites2x: sprite-map("sprites-retina/buttons/*.png", $spacing: 20px); // import 2x sprites, 20px padding
Almost ready to rock and roll!! Create a class for your sprite, and use an include to generate it.
.myHoverActiveButton {
@include retina-sprite(signIn, $hover: true, $active: true); // imports signIn.png, signIn_hover.png, and signIn_active.png
}
.myHoverButton {
@include retina-sprite(signIn, $hover: true); // imports signIn.png and signIn_hover.png
}
.myBoringButton {
@include retina-sprite(signIn); // imports signIn.png
}
Compass will output the sprite path as /images/sprites/blahblah.png so you will need to use a simple server to preview it (which you're probably doing anyhow).