先日、超〜久しぶりにコーディングをしました。
Retina対応の案件ということで、よさげなmixinを物色したところ、なかなかなかったので、作ってみました。
これからRetinaで苦労するであろう誰かの助けになれば嬉しいです。
今回作ってみたmixinはGitHubからダウロードできます。
https://github.com/xipx/Better-Sprites-for-Compass
使い方
1. スプライトファイルの末尾のランダムの文字列を削除する
末尾のランダムの文字列を削除しないとmixinがぐっと長くなっちゃうので、まずは以下のコードをconfig.rbにコピペしておきましょう。ファイル名も綺麗になるし、一石二鳥です。
on_sprite_saved do |filename|
if File.exists?(filename)
FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
end
end
on_stylesheet_saved do |filename|
if File.exists?(filename)
css = File.read filename
File.open(filename, 'w+') do |f|
f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
end
end
end2. Compassとmixin fileをインポートする
@import "compass";
@import "sprite-background";3. get_sprites_obj() 関数を使って初期化をする
このmixinを使う前に、まずはちょっとした初期化をしてもらうことになっているので、お忘れなく！
例えば, images フォルダの構造は以下としますね。
.
└── images
├── foo
│ ├── bar.png
│ └── foobar.png
└── foo_retina
├── bar.png
└── foobar.png下記のように、スプライトフォルダを引数にしておくと、スプライトを生成してくれます。必ず戻り値を $sprites_obj 変数に代入してください。mixinの中で使いますから！
$sprites_obj: get_sprites_obj( foo, foo_retina );なお、以下の2点を必ず守ってください。
- Retina画像は別フォルダを作って中に入れる。そのフォルダの名前を「○_retina」のように命名する。
- Retina画像のファイル名と通常の画像のファイル名が同じになるようにしておく。
3. mixinの使い方
通常（Retinaなし）の場合。
引数：barはファイル名、fooはフォルダ名。
@include _sprite-background(bar, foo);Retina バージョンを出力する：
@include _sprite-background(bar, foo, $retina:true);width と height が要らないとき：
@include _sprite-background(bar, foo, $dimension:false);background-positionを微調整したいとき：
@include _sprite-background(bar, foo, $offset-left:10px, $offset-top:5px);注意！Sass 3.3以上を使ってください
Sass 3.3から新たに追加された関数を使ってますので、Sass 3.3以上必須です。
なので、Compassの最新版をインストールしておけば問題ないでしょう。
以下のコマンドで Compass 1.0.0 preview版をインストールしておきましょう！
gem install compass --preなお、Windows環境ではエンコードのエラーが出るらしいのですが、下記をconfig.rbに書いておけば問題ないでしょう。
Encoding.default_external = "utf-8"まとめ
以上です。簡単でしょう？
やりたかったのは、Retina対応のスプライトとそうでないスプライトを一個のmixinにして、Compassのスプライト関連のmixinを統合することです。目的は達成できたんじゃないかなと思いますので、それでは。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
