Skip to content

Instantly share code, notes, and snippets.

@dfadler
Created July 13, 2012 15:05
Show Gist options
  • Star 27 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save dfadler/3105369 to your computer and use it in GitHub Desktop.
Save dfadler/3105369 to your computer and use it in GitHub Desktop.
A SASS 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 height of the sprite-image
$sprite-width: image-width($sprite-image)
// Returns the width
width: $sprite-width
@georgiee
Copy link

Thanks for that mixin.
I just wondered how to use get-sprite in conjunction with a magic import.
My first try was to do it by my own with 'sprite-map("my-icons/.png");', but that fails as the two sprite maps are conflicting- see the first comment.
Simple & straight solution: It`s not so obvious but compass will create a variable during a magic import which holds the reference to the generated sprite map. This reference can be used with the mixin as the first argument.
Example: @import "my-icons/
.png" will provide the variable $my-icons-sprites.

Anyway thanks for the mixin, finally I can change my sprite icons inside my media queries :)

// Automagically import vs manual sprite-map
// IMPORTANT: this will create a variable $my-icons-sprites which can be reused
// this isn`t so obvious. NEVER use sprite-map("my-icons/*.png"); in conjunction with the magic import.
// They are conflicting and you will end up up with sprites not showing
// up as one of the mapping methods (magic or manual) will wipe out the previously generated sprite file.
@import "my-icons/*.png";
@include all-my-icons-sprites(true);

//create a small helper for your sprites
@mixin icon-sprite($name, $merge:false){
  @if $merge == false {
    //default via extend
    @extend .my-icons-#{$name};
  }@else{
    //mixin shown here, used to merge in the generated sprite information
    @include get-sprite($my-icons-sprites,$name);
  }
}

//normal usage via extend
.arrow{
  @include icon-sprite("kick-ass-icon");
}

//merge as you can't extend inside media-queries
.another-arrow-which-is-responsive{
  @include icon-sprite("kick-ass-icon-small", true);
  //see gist.github.com/2028061 for that mq helper
  @include tablet-landscape-and-up {
    @include icon-sprite("kick-ass-icon-huge", true);
  }
}

//this fails!  merge is set to 'false' and therefore the selector use extend
.not-working-arrow{
  //that's okay
  @include icon-sprite("kick-ass-icon-small", false);
  //that will fail
  @include tablet-landscape-and-up {
    @include icon-sprite("kick-ass-icon-huge", false);
  }
}

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