Skip to content

Instantly share code, notes, and snippets.

@DannyJoris
Forked from brubrant/get-sprite.scss
Last active August 29, 2015 13:57
Show Gist options
  • Save DannyJoris/9762931 to your computer and use it in GitHub Desktop.
Save DannyJoris/9762931 to your computer and use it in GitHub Desktop.
// Example
.example {
@include get-sprite($sprites, 'example-image');
@include at-retina() {
@include get-sprite($sprites2x, 'example-image');
}
}
// Mixins
// http://compass-style.org/reference/compass/helpers/sprites/
@mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: false, $width: false, $offset-x: 0, $offset-y: 0) {
//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, $offset-x, $offset-y);
background: $sprite-map $sprite-position $repeat;
// divide background size and position by 2
@include at-retina() {
$sprite-position: (nth($sprite-position, 1) / 2) (nth($sprite-position, 2) / 2);
background: $sprite-map $sprite-position $repeat;
background-size: (image-width(sprite-path($map)) / 2) (image-height(sprite-path($map)) / 2);
}
// 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 width of the sprite-image
$sprite-width: image-width($sprite-image);
// Returns the width
width: $sprite-width;
}
}
@mixin at-retina() {
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
@content;
}
}
// Sprites
$sprites: sprite-map("sprites/*.png", $spacing: 20px);
$sprites2x: sprite-map("sprites2x/*.png", $spacing: 40px);
@DannyJoris
Copy link
Author

only works if every non-retina image also has a retina version set. Needs fix.

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