Skip to content

Instantly share code, notes, and snippets.

@clayb
Last active June 3, 2016 15:31
Show Gist options
  • Save clayb/12bd37cb5cac0b783af2 to your computer and use it in GitHub Desktop.
Save clayb/12bd37cb5cac0b783af2 to your computer and use it in GitHub Desktop.
Retina Sprites mixin by Gaya Kessler, modified to allow sprite scaling.
/*
* Retina Sprites for Compass
* by: Gaya Kessler
* last update: 03/11/14
*
* Usage:
* 1. create two folders in your image directory (in this case 'icons' and 'icons-2x').
* 2. adjust the foldernames defined below if you use different names.
* 3. create sprite images for pixel ratio 1 screens and put them in the first folder.
* 4. create sprite images for pixel ratio 2 screens and put them in the second folder, use the same filenames.
* 5. use the sprite-image in your Sass/Scss using: '@include use-sprite(<sprite-name>)'
*/
//first we'll define the folders where the sprites are and their layouts
$icons: sprite-map("icons/*.png", $spacing: 4px);
$icons-2x: sprite-map("icons-2x/*.png", $spacing: 8px);
$spriteUrl: sprite-url($icons);
$spriteUrl-2x: sprite-url($icons-2x);
//Sprite mixin, works perfectly with standard defines
@mixin use-sprite($sprite, $scale: 1) {
background-image: $spriteUrl;
background-position: sprite-position($icons, $sprite, 0, 0, true);
background-repeat: no-repeat;
overflow: hidden;
display: block;
height: image-height(sprite-file($icons, $sprite)) * $scale;
width: image-width(sprite-file($icons, $sprite)) * $scale;
background-size: (sprite-width($icons) * $scale) (sprite-height($icons) * $scale);
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
background-image: $spriteUrl-2x;
background-size: ((image-width(sprite-path($icons-2x)) / 2) * $scale) ((image-height(sprite-path($icons-2x)) / 2) * $scale);
background-position: sprite-position($icons, $sprite, 0, 0, true);
height: (image-height(sprite-file($icons-2x, $sprite)) / 2) * $scale;
width: (image-width(sprite-file($icons-2x, $sprite)) / 2) * $scale;
}
}
@clayb
Copy link
Author

clayb commented Apr 19, 2016

Updated this to define the sprite-url() in a variable outside of the mixin, because having it within the mixin causes the sprite to be checked and generated each time the mixin is used.

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