Created
March 21, 2013 13:58
-
-
Save mattisfrommars/5213187 to your computer and use it in GitHub Desktop.
Compass retina sprite mixin
This file contains hidden or 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
| /* | |
| @author: Matt Jewell - mattjewell.co.uk | |
| Borrows HEAVILY from thulstrup / compass-retina-sprites.scss https://gist.github.com/thulstrup/2140082 | |
| but ditches the media queries and serves retina to all | |
| */ | |
| // SET UP SPRITES | |
| @import "autosprite/*.png"; | |
| $sprite-map: sprite-map("autosprite/*.png"); | |
| .sprite-spacing-retina-hack { @include sprite($sprite-map, sprite-spacer); } | |
| /* | |
| By including a 300x1px image in the sprite map, we know it's width will be 300px | |
| so we can set the background-width to 150px | |
| */ | |
| $sprite-background-width: 300px; | |
| @mixin retina-sprite ($name) { | |
| background-image: sprite-url($sprite-map); | |
| @include background-size($sprite-background-width/2); | |
| $ypos: round(nth(sprite-position($sprite-map, $name), 2) /2); | |
| background-position: 0 $ypos; | |
| } | |
| @mixin non-retina-sprite($name) { | |
| @include sprite($sprite-map, $name); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment