Skip to content

Instantly share code, notes, and snippets.

@inferno
Created August 6, 2013 17:26
Show Gist options
  • Select an option

  • Save inferno/6166596 to your computer and use it in GitHub Desktop.

Select an option

Save inferno/6166596 to your computer and use it in GitHub Desktop.
Spriting technique for compass and auto width/height setup.
$parts: sprite-map("sprites/*.png", $layout: smart)
$parts_names: sprite_names($parts)
.sprite
+inline-block
background: $parts
background-repeat: no-repeat
@each $sprite in $parts_names
.sprite_#{$sprite}
background-position: sprite-position($parts, $sprite)
width: image-width("sprites/#{$sprite}.png")
height: image-height("sprites/#{$sprite}.png")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment