Skip to content

Instantly share code, notes, and snippets.

@stikoo
Forked from antonkor/get-sprite.sass
Last active August 22, 2016 15:46
Show Gist options
  • Save stikoo/9934384 to your computer and use it in GitHub Desktop.
Save stikoo/9934384 to your computer and use it in GitHub Desktop.
// sprite mixin that can be used to include a sprite into media queries
// @include get-sprite($map, $sprite, $height, $width, $offset-x, $offset-y, $repeat);
// $map is the name of the sprite map, this is auto-generated as a global
// sass var when you do a (for instance) @import "sprites-x2/*.png"
// ----------
// Example: @include get-sprite($sprites-x2-sprites, logo, false, false);
//
@mixin get-sprite($map, $sprite, $height: true, $width: true, $offset-x: 0, $offset-y: 0, $repeat: no-repeat) {
//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 width 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