Skip to content

Instantly share code, notes, and snippets.

@cesarhdz
Forked from dfadler/get-sprite.sass
Created September 6, 2012 21:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cesarhdz/3660355 to your computer and use it in GitHub Desktop.
Save cesarhdz/3660355 to your computer and use it in GitHub Desktop.
A SASS mixin for generating a sprite declaration block that will work with media queries, in SCSS
// http://compass-style.org/reference/compass/helpers/sprites/
@mixin get-sprite($map, $sprite, $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);
// 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment