Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save VictorGarcia/3968081 to your computer and use it in GitHub Desktop.
Save VictorGarcia/3968081 to your computer and use it in GitHub Desktop.
Using Compass to generate normal and retina sprite maps at once
@mixin all-retina-sprites($map, $map2x) {
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx) {
$base-class: sprite-map-name($map);
.#{$base-class}-all-retina-sprites {
background-image: sprite-url($map2x);
}
@each $sprite in sprite-names($map) {
.#{$base-class}-#{$sprite} {
@extend .#{$base-class}-all-retina-sprites;
@if (sprite-position($map, $sprite) != sprite-position($map2x, $sprite)) {
$ypos: round(nth(sprite-position($map2x, $sprite), 2) / 2);
background-position: 0 $ypos;
} @else {
@include sprite($map2x, $sprite);
}
@if (image-width(sprite-file($map, $sprite)) != image-width(sprite-file($map2x, $sprite))) {
@include background-size(image-width(sprite-file($map, $sprite)) auto);
}
}
}
}
}
// Sprite set: General
// ----------------------------------------
//$general-layout: smart;
$general-spacing: 1px;
$general-sprite-dimensions: true;
@import "general/*.png";
@include all-general-sprites;
$general-retina-spacing: 1px;
$general-retina-sprite-dimensions: true;
@import "general-retina/*.png";
//@include all-general-retina-sprites;
@include all-retina-sprites($general-sprites, $general-retina-sprites);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment