Skip to content

Instantly share code, notes, and snippets.

@haribote
Forked from estahn/_compass-retina-sprites.scss
Created November 14, 2012 13:59
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save haribote/4072251 to your computer and use it in GitHub Desktop.
Save haribote/4072251 to your computer and use it in GitHub Desktop.
Using Compass to generate retina sprite maps at once
@mixin all-retina-sprites($map, $dimensions: false){
$base-class: sprite-map-name($map);
.#{$base-class}-retina-sprite{
background: sprite-url($map) no-repeat;
@include background-size(ceil(image-width(sprite-path($map)) / 2) auto);
}
@each $sprite in sprite-names($map){
.#{$base-class}-#{$sprite}{
@extend .#{$base-class}-retina-sprite;
@if $dimensions{
width: ceil(image-width(sprite-file($map, $sprite)) / 2);
height: ceil(image-height(sprite-file($map, $sprite)) / 2);
}
$pos: sprite-position($map, $sprite);
background-position: ceil(nth($pos, 1) / 2) ceil(nth($pos, 2) / 2);
}
}
}
// Sprite set: General
// ----------------------------------------
//$general-layout: smart;
$general-retina-spacing: 1px;
@import "general-retina/*.png";
//@include all-general-retina-sprites;
@include all-retina-sprites($general-retina-sprites, $dimensions: true);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment