続☆Compassでさくっとスプライトを作る方法

頻繁にブログ当番が回ってきてもたいした記事書けない松井です。
そんなわけで、今回も無理矢理Compassネタです。
(前回の記事はこちら

画像サイズの取得

width: image-width(画像ファイル名);
height: image-height(画像ファイル名);

画像のファイル名を入れてあげることで縦幅と横幅を取得できます。
ファイル名の部分は、config.rb画像パスの設定でimages_dir = “/”にしていれば
わざわざ階層のパスを書かなくても大丈夫です。

スプライトの画像を取得

$sprites: sprite-map("icons/*.png");

これで自動生成されたスプライト画像を取得してます。
mapで指定しておくとスプライトの位置や間隔なども指定することができます。

$sprites: sprite-map("icons/*.png",$spacing: 10px);

詳細については公式のCSS Sprite Helpers for CompassCompass Sprite Baseをみてください。

スプライトの画像サイズを取得

width: image-width(sprite-file($sprites, 画像ファイル名));
height: image-height(sprite-file($sprites, 画像ファイル名));

こんな感じでスプライトの画像サイズを簡単に取得できます。
Compassすごい!

スプライトの座標を取得

background-position: sprite-position($sprites, 画像ファイル名);

こんな感じで座標もさくっと取得できます。

Retina対応のMixin

Retina対応で画像サイズを半分にとかめんどうなのでCompassにやってもらうための
Mixinです。

$sprites: sprite-map("sprites/*.png");
$sprites-img:sprite-url($sprites);
@mixin sprite-background($name) {
 	background-image: $sprites-img;
 	background-repeat: no-repeat;
 	display: block;
 	height: image-height(sprite-file($sprites, $name)) / 2;
 	width: image-width(sprite-file($sprites, $name)) / 2;
 	$ypos: round(nth(sprite-position($sprites, $name), 2) / 2);
 	background-position: 0 $ypos;
 	@include background-size(50px auto);
}
//使い方
.hogehoge {
 	@include sprite-background(hoge);
}

参考記事
image-height()とimage-width()で取得した画像サイズを更に半分に、
更にnth()でpositionの高さを取得して半分にしてます

@include background-size(50px auto);の箇所の50pxという値ですが、
画像内で一番横幅の大きいサイズの半分の値を指定してやると良いらしいです。

ちなみにメディアクエリーでRetina対応での分岐をさせたい場合は下記が参考になります。

$sprites: sprite-map("sprites/*.png");
$sprites-retina: sprite-map("sprites-retina/*.png");
 
@mixin sprite-background($name) {
  background-image: sprite-url($sprites);
  background-position: sprite-position($sprites, $name);
  background-repeat: no-repeat;
  display: block;
  height: image-height(sprite-file($sprites, $name));
  width: image-width(sprite-file($sprites, $name));
  @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 2) {
    @if (sprite-position($sprites, $name) != sprite-position($sprites-retina, $name)) {
      $ypos: round(nth(sprite-position($sprites-retina, $name), 2) / 2);
      background-position: 0 $ypos;
    }
    @include background-size(444px auto);
    background-image: sprite-url($sprites-retina);
  }
}
 
//使い方
.hogehoge {
  @include sprite-background(hoge);
}

参考記事

PNGの生成について

oily_pngをインストールするとPNGの生成が爆速になるらしいです。

gem install oily_png

が私の環境ではなぜかエラーが出たのでどんくらい早いかはわかりません!!以上!

☆その後無事インストールできたので、追記☆

↓下記みたいなエラーがでてたのですが、DevKitをインストールしてあげたらうまくいきました。

Please update your PATH to include build tools or download the DevKit
from 'http://rubyinstaller.org/downloads' and follow the instructions
at 'http://github.com/oneclick/rubyinstaller/wiki/Development-Kit'

DevKitをインストール方法
1.rubyinstallerからDevKitをダウンロード
2.C:\DevKit といったかんじでディレクトリを作ってダウンロードしてきたやつを保存・解凍
3.コマンドで cd さっきつくったディレクトリ で移動して下記のコマンドを叩く
 ・ruby dk.rb init
 ・ruby dk.rb review
 ・ruby dk.rb install
で再度gem install oily_pngを叩いたら無事インストールできました。

「続☆Compassでさくっとスプライトを作る方法」への1件のフィードバック

コメントは停止中です。