retina sprites

gistfile1.scss

/* Compass HiDPI sprite helper
 *
 * Pre-requisites :
 * - the hidpi sprite images needs to be in a folder near the standard one, and
 * named **<name>_hidpi** (e.g. **images/icons** and **images/icons_hidpi**)
 *
 * @author : MAD <ecrire@madsgraphics.com>
 */

// ****************************************************************************/

// Load Compass library (only need sprites part in fact)
@import "compass";

// Maps Loader
//
// Use it to load all sprite (std and hipdpi) in one time and return the sprite
// maps.
//
// Args :
// - $glob : the folder-name that contain the sprites
//
@function hidpi-sprite-map($glob) {

  $sprite-map       : sprite-map("#{$glob}/*.png");
  $hidpi-sprite-map : sprite-map("#{$glob}_hidpi/*.png");

  @return join($sprite-map, $hidpi-sprite-map, comma);
}

// Internal mixin to generate background CSS
//
// Args :
// - $map          : the sprite map
// - $x            : the x position
// - $y            : the y position
// - $r (optional) : the ratio to apply to the sprite
@mixin sprite-background($map, $x, $y, $r : 1) {
  $path               : sprite-path($map);
  background-image    : sprite-url($map);
  background-size     : (image-width($path) / $r) (image-height($path) / $r);
  background-position : $x $y;
}

// Sprite generator
//
// Args :
// - $maps                : the maps loaded by `hidpi-sprite-map`
// - $sprite              : the sprite for which you want the CSS
// - $offset-x (optional) : overwrite the x-position of your sprite. Also
//                          support left / right and percentage
// - $offset-y (optional) : overwrite the x-position of your sprite. Also
//                          support top / bottom and percentage
//
@mixin hidpi-sprite($maps, $sprite, $offset-x : 0, $offset-y : 0) {
  // Get maps (SD & HD)
  $sprite-map       : nth($maps, 1);
  $hidpi-sprite-map : nth($maps, 2);

  // Set defaults variable env
  $hidpi-sprite-ratio : 2 !default;
  $hidpi-debug        : false !default;

  // Set defaults positions
  $position-x       : $offset-x; $position-y       : $offset-y;
  $hidpi-position-x : $offset-x; $hidpi-position-y : $offset-y;

  // Overwrite positions width optional offset params
  @if $offset-x == left or $offset-x == right {
    $position-x       : $offset-x;
    $hidpi-position-x : $offset-x;
  } @else if unit($offset-x) == "%" {
    $position-x       : $offset-x;
    $hidpi-position-x : $offset-x;
  } @else {
    $position-x       : nth(sprite-position($sprite-map, $sprite), 1) + $offset-x;
    $hidpi-position-x : (nth(sprite-position($hidpi-sprite-map, $sprite), 1) / $hidpi-sprite-ratio) + $offset-x;
  }

  @if $offset-y == top or $offset-y == bottom {
    $position-y       : $offset-y;
    $hidpi-position-y : $offset-y;
  } @else if unit($offset-y) == "%" {
    $position-y       : $offset-y;
    $hidpi-position-y : $offset-y;
  } @else {
    $position-y       : nth(sprite-position($sprite-map, $sprite), 2) + $offset-y;
    $hidpi-position-y : (nth(sprite-position($hidpi-sprite-map, $sprite), 2) / $hidpi-sprite-ratio) + $offset-y;
  }

  // Outpout CSS \o/
  @if $hidpi-debug {
    // Debug mode
    // (on a good suggestion from @kReEsTaL)
    @include sprite-background($hidpi-sprite-map, $hidpi-position-x, $hidpi-position-y, $hidpi-sprite-ratio);
  } @else {
    // Debug Off > Production
    @include sprite-background($sprite-map, $position-x, $position-y);

    @media
    // The Retina MQ
    // Thx to Chris Coyier : http://css-tricks.com/snippets/css/retina-display-media-query/
    // Corrected by @rik24d
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) {
      @include sprite-background($hidpi-sprite-map, $hidpi-position-x, $hidpi-position-y, $hidpi-sprite-ratio);
    }
  }
}

// ****************************************************************************/
// Use case

// First load the maps
$icons : hidpi-sprite-map("icons");
$hidpi-debug : true; // optional > only output the HiDPI for test purposes
$hipdi-ratio : 2;    // optional > only set if the HD sprites have a different
                     //            ratio (i.e. HD != 2 * SD)

.icon-icomoon {
  // Then generate the CSS parts using the `hidpi-sprite` mixin, eventually with
  // $offset-x and / or $offset-y position
  @include hidpi-sprite($icons, "icomoon", right, 3px);
}