Compass sprites and retina displays

Simplified version (SASS syntax)

This mixin takes as its arguments the name of a sprited image (example: ‘button’), the sprite-map for standard displays, and the sprite-map for retina displays, which you can assign once as $sprites and $sprites2x and leave out in the rest of your SCSS/SASS.

I updated Pam Selle’s retina-optimized-sprite original mixin by adding +image-size

Advanced version (SCSS syntax)

@import"compass/utilities/sprites";// Include compass sprite helpers@import"compass/css3/background-size";// Include helper to calc background size@mixinretina-sprite($name,$hover:false,$active:false){@include_retina-sprite($name,$sprites,$sprites2x,$hover,$active);}// The general purpose retina sprite mixin.//// @include retina-sprite(name, $spritemap1, $spritemap2)// @include retina-sprite(name, $spritemap1, $spritemap2[, $dimensions: true, $pad: 0])//// If `dimensions` is true, then width/height will also be set.//// if `pad` is non-zero, then that's how much padding the element will have (requires// $spacing on the sprite maps). Great for iPhone interfaces to make hit areas bigger.//@mixin_retina-sprite($name,$sprites,$sprites2x,$hover,$active,$dimensions:true,$pad:0){@if$dimensions==true{@includesprite-dimensions($sprites,$name);}background-image:sprite-url($sprites);background-position:sprite-position($sprites,$name,-$pad,-$pad);background-repeat:no-repeat;@if$hover==true{$name_hover:$name+_hover;&:hover{background-position:sprite-position($sprites,$name_hover,-$pad,-$pad);}}@if$active==true{$name_active:$name+_active;&:active{background-position:sprite-position($sprites,$name_active,-$pad,-$pad);}}@if$pad>0{padding:$pad;}@media(-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(min-device-pixel-ratio:1.5){&{$pos:sprite-position($sprites2x,$name,-$pad*2,-$pad*2);background-image:sprite-url($sprites2x);background-position:nth($pos,1)nth($pos,2)/2;@includebackground-size(ceil(image-width(sprite-path($sprites2x))/2)auto);// sprite-path() returns the path of the generated sprite sheet, which// image-width() calculates the width of. the ceil() is in place in case// you have sprites that have an odd-number of pixels in width@if$hover==true{$name_hover:$name+_hover;// create myButton_hover and assign it&:hover{$pos:sprite-position($sprites2x,$name_hover,-$pad*2,-$pad*2);background-position:nth($pos,1)nth($pos,2)/2;}}@if$active==true{$name_active:$name+_active;// create myButton_active and assign it&:active{$pos:sprite-position($sprites2x,$name_active,-$pad*2,-$pad*2);background-position:nth($pos,1)nth($pos,2)/2;}}}}}