twolfson/json2css — pull request #13 by alexbain (2013-07-08 22:48:58+00:00)
Title: Adding sprite-background-size and sprite-2x helpers.

This pull request creates two additional helpers that makes it much easier to build retina spritesheets with the grunt-spritesmith, spritesmith, json2css stack.

``sprite-background-size``: Adds the ability to set a background-size property to the total-width, total-height properties of the sprite.
``sprite-2x``: This helper is a convenience method for easily creating @2x sprites. It takes two arguments - ``@sprite2x`` and ``@sprite1x`` and puts together the right blend of CSS to render the sprite correctly on a high pixel density display.

To properly do @2x sprites you'll still need to define two distinct spritesheets. Example:

homepage-sprite-src/
logo.png
footer.png
icon-email.png

homepage-sprite-2x-src/
logo-2x.png
footer-2x.png
icon-email-2x.png

grunt-spritesmith would have to know about both of these spritesheets, and you'd have to include both in your LESS/SCSS/Stylus/etc.

After including the generated output, you can do something like this in the CSS:

.logo {
.sprite(@logo);
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.header-logo {
.logo {
.sprite(@logo-2x, @logo);
}
}

Please take a look at this and let me know what you think!

Thanks.