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: Images ©BBC News.

_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;
      }
    }
  }
}

arabic-brand.png

arabic-brand.png

hausa-brand.png

hausa-brand.png

icons-s40deffd3eb.png

icons_x2-sb6eb53dcf4.png

sass_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;
      }
    }
  }
}

sasssprites.scss

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

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

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

@include all-icons-sprites;

sprites.css

/* HiDPI v1 | MIT License | git.io/hidpi */
.icons-sprite, .icons-arabic-brand, .icons-hausa-brand {
  background: url('/images/icons-s40deffd3eb.png') no-repeat;
}

.icons_x2-sprite {
  background: url('/images/icons_x2-sb6eb53dcf4.png') no-repeat;
}

@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) {
  .icons-sprite, .icons-arabic-brand, .icons-hausa-brand {
    -webkit-background-size: 102px auto;
    -moz-background-size: 102px auto;
    -o-background-size: 102px auto;
    background-size: 102px auto;
    background-image: url('/images/icons_x2-sb6eb53dcf4.png');
  }
}

.icons-arabic-brand {
  background-position: 0 -23px;
}

.icons-hausa-brand {
  background-position: 0 0;
}

sprites.scss

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

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

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

@include all-icons-sprites;

stylesheetssprites.css

/* HiDPI v1 | MIT License | git.io/hidpi */
.icons-sprite, .icons-arabic-brand, .icons-hausa-brand {
  background: url('/images/icons-s40deffd3eb.png') no-repeat;
}

.icons_x2-sprite {
  background: url('/images/icons_x2-sb6eb53dcf4.png') no-repeat;
}

@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) {
  .icons-sprite, .icons-arabic-brand, .icons-hausa-brand {
    -webkit-background-size: 102px auto;
    -moz-background-size: 102px auto;
    -o-background-size: 102px auto;
    background-size: 102px auto;
    background-image: url('/images/icons_x2-sb6eb53dcf4.png');
  }
}

.icons-arabic-brand {
  background-position: 0 -23px;
}

.icons-hausa-brand {
  background-position: 0 0;
}