Skip to content

Instantly share code, notes, and snippets.



Last active Aug 29, 2015
What would you like to do?
Compass Spriting w/ Retina & Media Query Support
// call the all-sprites mixin to generate the base styles
// with MARKUP
// the following markup with generate retina assets for retina display, or regular images if a regular display
// <div class="global-image1"/>
// with SASS
// if you need to share a sprite with another element, just extend it
@extend .global-image1
// if you need to use sprites inside of @media, use the get-sprite mixin
@media (min-width: 600)
@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dppx)
$global-sprites: sprite-map("global/**/*.png", $layout: smart)
$global-retina-sprites: sprite-map("global-retina/**/*.png", $layout: smart)
$base-class: sprite-map-name($global-sprites)
background-image: sprite-url($global-sprites)
background-repeat: no-repeat
$sprite-names: sprite-names($global-sprites)
@each $sprite in $sprite-names
@extend .#{$base-class}-sprites
$map-url: sprite-url($global-retina-sprites)
$map-width: image-width(sprite-path($global-retina-sprites)) / 2
background-image: $map-url
background-size: $map-width auto
$sprite-image: sprite-file($global-sprites, $sprite)
$width: image-width($sprite-image)
$height: image-height($sprite-image)
background-position: sprite-position($global-sprites, $sprite)
width: $width
height: $height

This comment has been minimized.

Copy link

@robertwbradford robertwbradford commented May 9, 2014

This is a great piece of code. Thank you. I'm not understanding why the get-sprite mixin only sets the background-position, width, and height. Maybe I'm not understanding the use case, but I would think it would also include the background-image and background-repeat of the sprites. Are you saying it's to be included in a class that has previously extended the corresponding sprite class?

What about adding something like the following:

// sprites.sass
  @extend .#{sprite-map-name($global-sprites)}-#{$sprite}

// example.sass

This would apply all the necessary styling to .foo, and you don't have to remember/use the full sprite class names throughout.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.