CompassでCSSスプライト（Retina対応）

Compassプロジェクトにimages/spritesフォルダを作成
素材画像をPNG形式で、表示サイズの2倍で作成しておく

@import "compass/css3/background-size";

$map: sprite-map("sprites/*.png", $layout: smart);
$map-img: sprite-url($map);

@mixin sprite-background($name, $text: false) {
    display: inline-block; // block;

    width: image-width(sprite-file($map, $name)) / 2;
    height: image-height(sprite-file($map, $name)) / 2;
    background-image: $map-img;
    background-repeat: no-repeat;
    $pos: sprite-position($map, $name);
    background-position: (nth($pos, 1) / 2) (nth($pos, 2) / 2);
    @include background-size(ceil(image-width(sprite-path($map)) / 2) auto);

    @if not $text {
        vertical-align: top;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        font: 0/0 a;
        text-shadow: none;
        color: transparent;
    }
}

使い方

.hoge {
    @include sprite-background("hoge"); // images/sprites/hoge.png
}