chriseppstein/compass — pull request #977 by aarongustafson (2012-07-27 20:22:19+00:00)
Title: First blush attempt at addressing hi-res sprites

This is a re-post of Pull Request #970 from a new branch in my repo dedicated to this feature. I will close the other pull request momentarily.

I have added the .rb tweaks to my local Compass Gem (0.13 Alpha 0) and they seem to be working well. Here’s how the changes play out:

```scss
.slidecontrols {
a {
@include hires {
@include sprite-map-background-size( $icons, .5 );
}
}
.carousel-prev {
background: sprite( $icons, arrow-left ) no-repeat;
@include hires {
background: sprite( $icons, arrow-left-2x, 0, 0, .5 ) no-repeat;
}
}
.carousel-next {
background: sprite( $icons, arrow-right ) no-repeat;
@include hires {
background: sprite( $icons, arrow-right-2x, 0, 0, .5 ) no-repeat;
}
}
}
```

This loads the hi-res sprite at a ratio of .5 (or 50%. both are valid) within my hi-res block:

```scss
@mixin hires() {
@media
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-ms-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (resolution: 300dpi)
{
@content;
}
}
```

I will continue testing, but if you have a moment to take a look and let me know if I’ve missed anything crucial, I’d like to get this ready for prime-time and integration into Compass core.