【Compass】Compassのmixinを使ってCSSスプライト画像を作る

PC用

Compassプロジェクトに対象のフォルダを記載
例）"ディレクトリ名/*.png"
素材画像をPNG形式で作成しフォルダに入れる

@mixin sprite-btn($_sprites, $_symbol) {
    background: sprite($_sprites, $_symbol) no-repeat;
    display: block;
    @include inline-block;
    @include sprite-dimensions($_sprites, $_symbol);
}

$_sprites: sprite-map("ディレクトリ名/*.png", $spacing: 10px);

書き方

.hoge a {
　@include sprite-btn($_sprites, *画像名*);
}

書き出し結果

.hoge a {
  background: url('../img/*スプライト画像名*.png') 0 0 no-repeat;
  display: block;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  height: 41px;
  width: 132px;
  left: 298px;
  top: 310px;
}

スマホ用（Retina対応）

Compassプロジェクトに対象のフォルダを記載
例）"ディレクトリ名/*.png"
素材画像をPNG形式で作成しフォルダに入れる
ここまではPCと一緒

@mixin sprite-btn($_sprites, $_symbol) {
    $pos-y: round(nth(sprite-position($_sprites, $_symbol), 2) / 2);
    background: $_sprites 0 $pos-y no-repeat;
    display: block;
    @include background-size(ceil(image-width(sprite-path($_sprites)) / 2) ceil(image-height(sprite-path($_sprites)) / 2));
    @include inline-block;
    width: round(image-width(sprite-file($_sprites, $_symbol)) / 2);
    height: round(image-height(sprite-file($_sprites, $_symbol)) / 2);
}

$_sprites: sprite-map("ディレクトリ名/*.png", $spacing: 10px);

書き方

.hoge a {
　@include sprite-btn($_sprites, *画像名*);
}

書き出し結果

.hoge a {
  background: url('../img/*スプライト画像名*.png') 0 0 no-repeat;
  display: block;
  -moz-background-size: 53px 160px;
  -o-background-size: 53px 160px;
  -webkit-background-size: 53px 160px;
  background-size: 53px 160px;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  width: 53px;
  height: 23px;
}

※何か間違いがあれば指摘してください。