Last active
June 3, 2016 15:31
-
-
Save clayb/12bd37cb5cac0b783af2 to your computer and use it in GitHub Desktop.
Retina Sprites mixin by Gaya Kessler, modified to allow sprite scaling.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.