Compassでスプライト画像の幅と高さを取得する方法

  • あとで読みたい人は…
 Compassでスプライト画像の幅と高さを取得する方法

こんにちは、@cappeeです。

今回はSass(SCSS)+Compassを使ったスプライト画像についてです。

スプライト画像全体の幅(width)、高さ(height)を取得する方法についてピンポイントでご紹介したいと思います。

なぜピンポイントかと言いますと、私がRetina対応のmixinを作成している時、これを探すのにちょいと苦労したからですね。

background-size を指定する時にスプライト画像全体のサイズを取得する必要がありました。

コピペで使える系の記事を参考に見てみても、background-sizeの幅の指定だけは手動で入力するmixinがほとんどだったんですね。

こんな感じで。

@include background-size(500px auto);

スプライト画像はCompassさんが自動でつくってくれるのだから個別の画像が増えればスプライト画像のサイズだって都度変わるのに、毎回変更しないといけないの…(゚д゚)!?

いいえ、そんなことありません!!

こんなに便利なCompassだからスプライト画像のサイズを自動で取得できるはず!と思っていろいろと入らべてみたら辿り着きました( ;∀;)

これでRetina対応が楽になりますね。

スプライト画像全体の幅と高さを取得する

sprite-path()関数でスプライト画像全体の幅と高さを取得することができます。

幅(width)

image-width(sprite-path($replace))

高さ(height)

image-height(sprite-path($replace))

このsprite-path()関数ですが、Compass公式サイトのCSS Sprite Helpersを見ても掲載されてないんですよね。なぜー。

Retina対応したスプライト画像のmixin

background-sizeには上記のsprite-path()関数を使います。
Retina対応したスプライト画像のmixinはこれを応用して下記のようになります。

@mixin sprite-background($name) {
  width: image-width(sprite-file($replace, $name)) / 2;
  height: image-height(sprite-file($replace, $name)) / 2;
  $xpos: round(nth(sprite-position($replace, $name), 1) / 2);
  $ypos: round(nth(sprite-position($replace, $name), 2) / 2);
  background-image: $replace-img;
  background-position: $xpos $ypos;
  background-repeat:no-repeat;
  $wbgz: image-width(sprite-path($replace)) / 2;
  @include background-size($wbgz auto);
}

Retina対応したスマートフォンサイト用mixinはこちらで詳しく説明していますのでぜひ参考にしてみてください。
Retina対応したスプライト画像のmixin

いかがでしたでしたか?
mixinを使えばコーディングがスピードアップ!

間違いやもっと良い方法があるという方はお気軽にコメントください。

Sassの教科書も必読ですよ。

Pocket
article clipper Compassでスプライト画像の幅と高さを取得する方法

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)