Skip to content

Instantly share code, notes, and snippets.

@nickawalsh
Last active October 7, 2021 09:38
  • Star 98 You must be signed in to star a gist
  • Fork 19 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save nickawalsh/4232779 to your computer and use it in GitHub Desktop.
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
@AlexRule7
Copy link

$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