Instantly share code, notes, and snippets.

Embed
What would you like to do?
Auto Hi-res Sprites
@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
@nickawalsh

This comment has been minimized.

Show comment
Hide comment
@nickawalsh

nickawalsh Dec 7, 2012

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.

Owner

nickawalsh commented Dec 7, 2012

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.

@nickawalsh

This comment has been minimized.

Show comment
Hide comment
@nickawalsh

nickawalsh Dec 7, 2012

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

Owner

nickawalsh commented Dec 7, 2012

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

@Miggz

This comment has been minimized.

Show comment
Hide comment
@Miggz

Miggz Dec 28, 2012

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.

Miggz commented Dec 28, 2012

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.

@Miggz

This comment has been minimized.

Show comment
Hide comment
@Miggz

Miggz Dec 28, 2012

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.

Miggz commented Dec 28, 2012

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.

@nickawalsh

This comment has been minimized.

Show comment
Hide comment
@nickawalsh

nickawalsh Feb 4, 2013

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.

Owner

nickawalsh commented Feb 4, 2013

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.

@nickawalsh

This comment has been minimized.

Show comment
Hide comment
@nickawalsh

nickawalsh Mar 8, 2013

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

Owner

nickawalsh commented Mar 8, 2013

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

@pauldariye

This comment has been minimized.

Show comment
Hide comment
@pauldariye

pauldariye May 14, 2013

Thanks nick. I just wrapped up Assembling Sass 2

pauldariye commented May 14, 2013

Thanks nick. I just wrapped up Assembling Sass 2

@AlexRule7

This comment has been minimized.

Show comment
Hide comment
@AlexRule7

AlexRule7 May 23, 2013

$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.

AlexRule7 commented May 23, 2013

$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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment