HiDPI sprites with Compass

README.md

This gist demonstrates how to use Compass magic sprites in combination with HiDPI.

See how it's done

Credits: Icons © Adam Whitcroft

Oh and you may check Compass HDPI

_hidpi.scss

/*! HiDPI v1 | MIT License | git.io/hidpi */
$hidpi-debug: false !default;

@import 'compass/css3';

@mixin hidpi-abstract($image, $extension) {
  $image-fullname: '#{$image}.#{$extension}';
  $image-hidpi-fullname: '#{$image}_x2.#{$extension}';

  background-image: image-url($image-hidpi-fullname);
  @include background-size(
    image-width($image-fullname)
    image-height($image-fullname)
  );
}

@mixin hidpi($image: false, $extension: png) {
  @if $hidpi-debug {
    @if $image {
      @include hidpi-abstract($image, $extension);
    } @else {
      @content;
    }
  } @else {
    @if $image {
      background-image: image-url('#{$image}.#{$extension}');
    }
    @media (-webkit-min-device-pixel-ratio: 1.3),
           (-o-min-device-pixel-ratio: 2.6/2),
           (min--moz-device-pixel-ratio: 1.3),
           (min-device-pixel-ratio: 1.3),
           (min-resolution: 1.3dppx) {
      @if $image {
        @include hidpi-abstract($image, $extension);
      } @else {
        @content;
      }
    }
  }
}

add.png

add.png

address-book-2.png

address-book-2.png

address-book.png

address-book.png

align-bottom-edges.png

align-bottom-edges.png

align-horizontal-centers.png

align-horizontal-centers.png

align-left-edges.png

align-left-edges.png

align-right-edges.png

align-right-edges.png

align-top-edges.png

align-top-edges.png

align-vertical-centers.png

align-vertical-centers.png

icons-sc320e812f1.png

icons_x2-s6ed877cba6.png

sprites.css

/* HiDPI v1 | MIT License | git.io/hidpi */
/* line 108, icons/*.png */
.icons-sprite, .icons-add, .icons-address-book-2, .icons-address-book, .icons-align-bottom-edges, .icons-align-horizontal-centers, .icons-align-left-edges, .icons-align-right-edges, .icons-align-top-edges, .icons-align-vertical-centers {
  background: url('/images/icons-sc320e812f1.png') no-repeat;
}

/* line 108, icons_x2/*.png */
.icons_x2-sprite {
  background: url('/images/icons_x2-s6ed877cba6.png') no-repeat;
}

/* line 63, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.13.alpha.0/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icons-add {
  background-position: 0 0;
}

/* line 63, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.13.alpha.0/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icons-address-book-2 {
  background-position: 0 -16px;
}

/* line 63, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.13.alpha.0/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icons-address-book {
  background-position: 0 -64px;
}

/* line 63, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.13.alpha.0/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icons-align-bottom-edges {
  background-position: 0 -128px;
}

/* line 63, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.13.alpha.0/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icons-align-horizontal-centers {
  background-position: 0 -48px;
}

/* line 63, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.13.alpha.0/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icons-align-left-edges {
  background-position: 0 -80px;
}

/* line 63, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.13.alpha.0/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icons-align-right-edges {
  background-position: 0 -32px;
}

/* line 63, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.13.alpha.0/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icons-align-top-edges {
  background-position: 0 -112px;
}

/* line 63, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.13.alpha.0/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icons-align-vertical-centers {
  background-position: 0 -96px;
}

@media (-webkit-min-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (min--moz-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  /* line 23, ../sass/sprites.scss */
  .icons-sprite, .icons-add, .icons-address-book-2, .icons-address-book, .icons-align-bottom-edges, .icons-align-horizontal-centers, .icons-align-left-edges, .icons-align-right-edges, .icons-align-top-edges, .icons-align-vertical-centers {
    -webkit-background-size: 16px auto;
    -moz-background-size: 16px auto;
    -o-background-size: 16px auto;
    background-size: 16px auto;
    background-image: url('/images/icons_x2-s6ed877cba6.png');
  }

  /* line 13, ../sass/sprites.scss */
  .icons-address-book {
    background-position: 0 -32px;
  }

  /* line 13, ../sass/sprites.scss */
  .icons-align-left-edges {
    background-position: 0 -96px;
  }

  /* line 13, ../sass/sprites.scss */
  .icons-align-right-edges {
    background-position: 0 -80px;
  }

  /* line 13, ../sass/sprites.scss */
  .icons-align-vertical-centers {
    background-position: 0 -64px;
  }
}

sprites.scss

@import "compass/utilities/sprites/base",
        "compass/css3/background-size",
        "hidpi"; // git.io/hidpi

@import "icons/*.png";
@import "icons_x2/*.png";

@mixin sprite-background-position-fix($map, $map-alt, $sprites: sprite-names($map)) {
  @each $sprite in $sprites {
    $x: round(nth(sprite-position($map-alt, $sprite), 1) / 2);
    $y: round(nth(sprite-position($map-alt, $sprite), 2) / 2);
    @if $x != nth(sprite-position($map, $sprite), 1) or $y != nth(sprite-position($map, $sprite), 2) {
      .#{sprite-map-name($map)}-#{$sprite}{
        background-position: $x $y;
      } 
    }
  }
}

@include all-icons-sprites;

@include hidpi {
  .icons-sprite {
    $icons-sprites-width: image-width(sprite-path($icons-sprites));
    @include background-size($icons-sprites-width auto);
    background-image: sprite-url($icons_x2-sprites);
  }
  @include sprite-background-position-fix($icons-sprites, $icons_x2-sprites);
}