mkuprionis/_app.scss

## _app.scss
@import "_mixins.scss";

@mixin app($dpi) {

  header {
    position: relative;

    header .logo {
      // Center in header
      @include sprt-box-centered($dpi, logo);
    }
  }

  button .icon.icon-name {
    @include sprt-box($dpi, icon-name);
  }

  .separator {
    height: 1px;
    width: 100%;
    @include sprt($dpi, separator);
    background-repeat: repeat-x;
  }
}

## _mixins.scss
@import "compass/utilities/sprites/base";

// Using Android way of naming densities
// (@x1.5 or @x2 doesn't look good for directory names in URLs)
//
// mdpi corresponds to normal density (device pixel ratio == 1; ~160dpi)
// hdpi corresponds to high density (device pixel ratio == 1.5; ~240dpi)
// xhdpi corresponds to extra-high density (Retina) (device pixel ratio == 2; ~320dpi)
//
// directory structure under <image-path>:
// sprites/
//         mdpi/
//              icon-1.png
//              icon-2.png
//         hdpi/
//              icon-1.png
//              icon-2.png
//         xhdpi/
//              icon-1.png
//              icon-2.png
//
// However below only mdpi and xhdpi images are used
// due to Compass issue #690 (see below)
$mdpi-sprites: sprite-map("sprites/mdpi/*.png");
//$hdpi-sprites: sprite-map("sprites/hdpi/*.png");
$xhdpi-sprites: sprite-map("sprites/xhdpi/*.png");

@mixin sprite-bg-size {
  // Need to hardcode sprite map dimensions
  // as there's no way to get it programmatically
  background-size: 500px 808px;
}

// see https://github.com/chriseppstein/compass/issues/690
// No good way to find sprite position when it is hdpi,
// i.e. device pixel ratio is 1.5
@mixin _sprite-position($map, $name) {
  @if (sprite-position($mdpi-sprites, $name) != sprite-position($map, $name)) {
    $xpos: round(nth(sprite-position($map, $name), 1) / 2);
    $ypos: round(nth(sprite-position($map, $name), 2) / 2);
    background-position: $xpos $ypos;
  }
  @else {
    background-position: sprite-position($map, $name);
  }
}

// Sets background image
@mixin sprt($dpi, $name) {
  @if $dpi == mdpi {
    background-image: $mdpi-sprites;
    @include _sprite-position($mdpi-sprites, $name);
  }
  @else if $dpi == hdpi {
    background-image: $hdpi-sprites;
    @include _sprite-position($hdpi-sprites, $name);
  }
  @else if $dpi == xhdpi {
    background-image: $xhdpi-sprites;
    @include _sprite-position($xhdpi-sprites, $name);
  }
  @include sprite-bg-size;
}

// Set background image and dimensions
@mixin sprt-box($dpi, $name) {
  @include sprt($dpi, $name);
  width: image-width(sprite-file($mdpi-sprites, $name));
  height: image-height(sprite-file($mdpi-sprites, $name));
}

// Set background image, dimensions and centers element in parent
// Parent needs to have position: relative or position: absolute
@mixin sprt-box-centered($dpi, $name) {
  @include sprt-box($dpi, $name);
  $h: image-height(sprite-file($mdpi-sprites, $name));
  $w: image-width(sprite-file($mdpi-sprites, $name));
  position: absolute;
  left: 50%;
  margin-left: -$w/2;
  top: 50%;
  margin-top: -$h/2;
}

## index.html
<!doctype html>
<html>
<head>
  <link href="/stylesheets/mdpi.css" type="text/css" rel="stylesheet">
  <!-- Also serve higher quality images for hdpi devices so that images are scaled down rather than up -->
  <link href="/stylesheets/xhdpi.css" type="text/css" rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)">
</head>
<body>
</body>
</html>

## mdpi.scss
@import "_app.scss";
@include app(mdpi);

## xhdpi.scss
@import "_app.scss";
@include app(xhdpi);
	@import "_mixins.scss";

	@mixin app($dpi) {

	header {
	position: relative;

	header .logo {
	// Center in header
	@include sprt-box-centered($dpi, logo);
	}
	}

	button .icon.icon-name {
	@include sprt-box($dpi, icon-name);
	}

	.separator {
	height: 1px;
	width: 100%;
	@include sprt($dpi, separator);
	background-repeat: repeat-x;
	}
	}
	@import "compass/utilities/sprites/base";

	// Using Android way of naming densities
	// (@x1.5 or @x2 doesn't look good for directory names in URLs)
	//
	// mdpi corresponds to normal density (device pixel ratio == 1; ~160dpi)
	// hdpi corresponds to high density (device pixel ratio == 1.5; ~240dpi)
	// xhdpi corresponds to extra-high density (Retina) (device pixel ratio == 2; ~320dpi)
	//
	// directory structure under <image-path>:
	// sprites/
	// mdpi/
	// icon-1.png
	// icon-2.png
	// hdpi/
	// icon-1.png
	// icon-2.png
	// xhdpi/
	// icon-1.png
	// icon-2.png
	//
	// However below only mdpi and xhdpi images are used
	// due to Compass issue #690 (see below)
	$mdpi-sprites: sprite-map("sprites/mdpi/*.png");
	//$hdpi-sprites: sprite-map("sprites/hdpi/*.png");
	$xhdpi-sprites: sprite-map("sprites/xhdpi/*.png");

	@mixin sprite-bg-size {
	// Need to hardcode sprite map dimensions
	// as there's no way to get it programmatically
	background-size: 500px 808px;
	}

	// see https://github.com/chriseppstein/compass/issues/690
	// No good way to find sprite position when it is hdpi,
	// i.e. device pixel ratio is 1.5
	@mixin _sprite-position($map, $name) {
	@if (sprite-position($mdpi-sprites, $name) != sprite-position($map, $name)) {
	$xpos: round(nth(sprite-position($map, $name), 1) / 2);
	$ypos: round(nth(sprite-position($map, $name), 2) / 2);
	background-position: $xpos $ypos;
	}
	@else {
	background-position: sprite-position($map, $name);
	}
	}

	// Sets background image
	@mixin sprt($dpi, $name) {
	@if $dpi == mdpi {
	background-image: $mdpi-sprites;
	@include _sprite-position($mdpi-sprites, $name);
	}
	@else if $dpi == hdpi {
	background-image: $hdpi-sprites;
	@include _sprite-position($hdpi-sprites, $name);
	}
	@else if $dpi == xhdpi {
	background-image: $xhdpi-sprites;
	@include _sprite-position($xhdpi-sprites, $name);
	}
	@include sprite-bg-size;
	}

	// Set background image and dimensions
	@mixin sprt-box($dpi, $name) {
	@include sprt($dpi, $name);
	width: image-width(sprite-file($mdpi-sprites, $name));
	height: image-height(sprite-file($mdpi-sprites, $name));
	}

	// Set background image, dimensions and centers element in parent
	// Parent needs to have position: relative or position: absolute
	@mixin sprt-box-centered($dpi, $name) {
	@include sprt-box($dpi, $name);
	$h: image-height(sprite-file($mdpi-sprites, $name));
	$w: image-width(sprite-file($mdpi-sprites, $name));
	position: absolute;
	left: 50%;
	margin-left: -$w/2;
	top: 50%;
	margin-top: -$h/2;
	}
	<!doctype html>
	<html>
	<head>
	<link href="/stylesheets/mdpi.css" type="text/css" rel="stylesheet">
	<!-- Also serve higher quality images for hdpi devices so that images are scaled down rather than up -->
	<link href="/stylesheets/xhdpi.css" type="text/css" rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)">
	</head>
	<body>
	</body>
	</html>