CSS Sprite for Retina Display Maple.css

00_mixin.scss

// - @mixin  CSS Sprite for Retina Display
// - @param  $isParent {String} the first parameter is a string(parent or child)
// - @param  $map {Glob} the second parameter is a glob
// - @param  $map-item {Glob} the second parameter is a glob
// - @param  $isSameChild {Boolean} default is false
// - @usage  @include sprite(child, $map-tabs, home)
@mixin sprite($isParent, $map, $map-item: foo, $isSameChild: false) {
	@if not $isSameChild {
		@if $isParent == "parent" {
			background-image: sprite-url($map);
			background-repeat: no-repeat;
			background-size: round(image-width(sprite-path($map)) / 2) round(image-height(sprite-path($map)) / 2);
		} @else {
			$position-x: round(nth(sprite-position($map, $map-item), 1) / 2);
			width: round(image-width(sprite-file($map, $map-item)) / 2);
			height: round(image-height(sprite-file($map, $map-item)) / 2);
			background-position: $position-x 0;
		}
	} @else {
		@if $isParent == "parent" {
			width: round(image-width(sprite-file($map, $map-item)) / 2);
			height: round(image-height(sprite-file($map, $map-item)) / 2);
			background-image: sprite-url($map);
			background-repeat: no-repeat;
			background-size: round(image-width(sprite-path($map)) / 2) round(image-height(sprite-path($map)) / 2);
		} @else {
			$position-x: round(nth(sprite-position($map, $map-item), 1) / 2);
			background-position: $position-x 0;
		}
	}
}

01_example.scss

$map-tabs: sprite-map("/files/img/sprite/tabs/*.png", $layout: horizontal);

.sprt-a { @include sprite(parent, $map-tabs); }
.sprt-a-bird1 { @include sprite(child, $map-tabs, bird1); }
.sprt-a-bird2 { @include sprite(child, $map-tabs, bird2); }
.sprt-a-bird3 { @include sprite(child, $map-tabs, bird3); }
.sprt-a-bird4 { @include sprite(child, $map-tabs, bird4); }

//.sprt-a { @include sprite(parent, $map-tabs, bird1, true); }
//.sprt-a-bird1 { @include sprite(child, $map-tabs, bird1, true); }

02_output.css

.sprt-a {
  background-image: url(/files/img/sprite/tabs-s3217a038c5.png);
  background-repeat: no-repeat;
  background-size: 120px 25px;
}

.sprt-a-bird1 {
  width: 30px;
  height: 25px;
  background-position: 0 0;
}

.sprt-a-bird2 {
  width: 30px;
  height: 25px;
  background-position: -30px 0;
}

.sprt-a-bird3 {
  width: 30px;
  height: 25px;
  background-position: -60px 0;
}

.sprt-a-bird4 {
  width: 30px;
  height: 25px;
  background-position: -90px 0;
}