Skip to content

Instantly share code, notes, and snippets.

@brubrant
Forked from dfadler/get-sprite.sass
Created July 23, 2012 23:20
Show Gist options
  • Save brubrant/3166895 to your computer and use it in GitHub Desktop.
Save brubrant/3166895 to your computer and use it in GitHub Desktop.
A SASS (SCSS) mixin for generating a sprite declaration block that will work with media queries
// 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 width of the sprite-image
$sprite-width: image-width($sprite-image);
// Returns the width
width: $sprite-width; }
}
@potench
Copy link

potench commented May 14, 2013

Thanks. Here's an example use case for those that forget this stuff pretty quickly like me:

$icons: sprite-map("sprites/icons/*.png"); // define a sprite map 

// ... later

@media only screen and (max-width: 500px) {
    .video .overlay {
        @include get-sprite($icons, play-btn-large);
    }
}

@potench
Copy link

potench commented May 14, 2013

Should note, using this causes the sprite to recompile: Compass/compass#897

@spehlivan
Copy link

Great solution. You saved my day.

@marc-wdf
Copy link

Sorry, it does not work for me.
Before I add this mixin, the sprites compilation was OK. Now, the spritemap generated is empty.

My previous code :

scss :
@import "picto/*.png";
@include all-picto-sprites;

html :
Logo

When I add the mixin, my code looks like this :
scss :
@mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true) {
$sprite-image: sprite-file($map, $sprite);
$sprite-map: sprite-url($map);
$sprite-position: sprite-position($map, $sprite);
background: $sprite-map $sprite-position $repeat;
@if $height == true {
$sprite-height: image-height($sprite-image);
height: $sprite-height; }
@if $width == true {
$sprite-width: image-width($sprite-image);
width: $sprite-width; }
}

@import "picto/*.png";
@include all-picto-sprites;
$picto: sprite-map("picto/*.png");
(...)
@media screen and (max-width: 520px) {
.picto-logo_large {
    @include get-sprite($picto, logo);
}
}

Thanks for your help !

@j4ys0n
Copy link

j4ys0n commented Feb 11, 2014

@WDF-project -

if you do:
@import "picto/*.png";
it will create the variable $picto-sprites - this is your sprite map.

then you can do:
@include get-sprite($picto-sprites, logo);

@tcelestino
Copy link

Nice!!!!

@aubricus
Copy link

@potench thanks for the use example; should be added to the gist.

@matzering
Copy link

You just made my day! Great mixin!!

@inigopascall
Copy link

It should be noted that this mixin appears to have a bit missing: there is no clause within the function that allows the width & height to be set 'manually', even though both can to be passed to the function to override the default values of 'true'. Here is my amended code with a couple of simple lines added that allow width & height to be set manually:

@mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true) {
$sprite-image: sprite-file($map, $sprite);
$sprite-map: sprite-url($map);
$sprite-position: sprite-position($map, $sprite);
background: $sprite-map $sprite-position $repeat;
height: $height;
@if $height == true {
$sprite-height: image-height($sprite-image);
height: $sprite-height; }
width: $width;
@if $width == true {
$sprite-width: image-width($sprite-image);
width: $sprite-width; }
}

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