Auto Hi-res Sprites

icons.sass

@import compass

$icons: sprite-map("icons/*.png")
$icons-hd: sprite-map("icons-hd/*.png")

i
  background: $icons
  display: inline-block
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)
    background: $icons-hd
    +background-size(image-width(sprite-path($icons)) auto)

@each $icon in sprite_names($icons)
  .icn-#{$icon}
    +sprite-dimensions($icons, $icon)
    background-position: sprite-position($icons, $icon)
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)
      $offset: nth(sprite-position($icons-hd, $icon), 2) / 2
      background-position: 0 $offset

Grabs all png files from images/icons and creates a sprite. Each file has a class of icn-filename created, with the appropriate dimensions and background position. At the same time, a sprite is compiled from double-resolution images (using the same file names, in images/icons-hd) and set with the appropriate media query.

Needs a bit of adjustment if you plan on adding $spacing to the generated sprite or use a layout other than vertical.

You'll likely want to include some sort of image replacement technique on i, for places where fallback text is appropriate.

This is awesome. One issue that I see is when zooming in FF or IE. once I zoom in far enough, the image switches to the hd image, but he background-size no longer seems to work. Not sure if this is a bug, or how to compensate for this, but I'm looking at it right now.

So I came up with two ways to remedy this. One is to set the +background-size inside of the @each. The downside to this will write a lot of extra css. Extra statement for every icon.

The alternative I used was to call the background on i with an !important and this will force it everywhere.

example: background-size: image-width(sprite-path($sprites)), auto !important;

This is not perfect, but in this situation I feel like the !important is the lesser of evils.

Thanks again for this great snippet.

Huh, that's really interesting - thanks for posting your findings (and sorry I missed them the first time around). I'll let you know if we stumble across a way to fix that without the extra duplication.

Important fix for retina icon serving - the background-size declaration needs to come after the background declaration.

Thanks nick. I just wrapped up Assembling Sass 2

$icons    : sprite-map("icons/*.png", $layout: smart)
$icons-hd : sprite-map("icons-hd/*.png")

$layout: smart — will save some kb for you. But use it only with non-retina sprite.