Skip to content

Instantly share code, notes, and snippets.

@antonkor
Forked from dfadler/get-sprite.sass
Created August 7, 2012 19:54
Show Gist options
  • Select an option

  • Save antonkor/3288800 to your computer and use it in GitHub Desktop.

Select an option

Save antonkor/3288800 to your computer and use it in GitHub Desktop.
A SASS mixin for generating a sprite declaration block that will work with media queries. UPDATE: Having offset-x & -y are very nice ;)
// http://compass-style.org/reference/compass/helpers/sprites/
@mixin get-sprite($map, $sprite, $offset-x: 0, $offset-y: 0, $repeat: no-repeat, $height: true, $width: true)
//http://compass-style.org/reference/compass/helpers/sprites/#sprite-file
$sprite-image: sprite-file($map, $sprite)
// http://compass-style.org/reference/compass/helpers/sprites/#sprite-url
$sprite-map: sprite-url($map)
// http://compass-style.org/reference/compass/helpers/sprites/#sprite-position
$sprite-position: sprite-position($map, $sprite, $offset-x, $offset-y)
// Returns background
background: $sprite-map $sprite-position $repeat
// http://compass-style.org/reference/compass/helpers/image-dimensions/
// Checks to see if the user wants height returned
@if $height == true
// Gets the height of the sprite-image
$sprite-height: image-height($sprite-image)
// Returns the height
height: $sprite-height
// http://compass-style.org/reference/compass/helpers/image-dimensions/
// Checks to see if the user wants height returned
@if $width == true
// Gets the height of the sprite-image
$sprite-width: image-width($sprite-image)
// Returns the width
width: $sprite-width
@stikoo
Copy link
Copy Markdown

stikoo commented Mar 10, 2014

Very nice, thanks

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