Automated Retina Sprites with Compass

retina.md

Automated Retina Sprites with Compass

I asked the following on Twitter the other day:

Thoughts, anyone? "Seems like there are a million ways to do retina sprites with Compass. What's the best way? #sass #compass" tweet

Specifically, what I wanted to do was to reference an icon once, like so:

.selector {
  @include the-sprite('once');
}`

And get:

.selector {
   // The regular icon.
}
@media ( the retina query ) {
  .selector {
    // The retina version.
    }
}

To my surprise I got a couple of really helpful replies. Both @Snugug and @krisbulman sent some code my way that does just what I'm looking for. Thanks guys!! ♥

• @Snugug has some pretty cool stuff in his Toolkit project and actually coded in support for retina icons today! Check it out here: https://github.com/Snugug/toolkit
• @krisbulman also coded up some awesomeness just for this: https://github.com/krisbulman/retina-sprite-mapper.

Both of these scripts are incredibly useful and one may suit your use case better than the other, so I encourage you to check them both out.