Retina対応のスプライトを作成するときに便利なCompass用のmixinを作ってみた

Retina対応のスプライトを作成するときに便利なCompass用のmixinを作ってみた

王

先日、超〜久しぶりにコーディングをしました。
Retina対応の案件ということで、よさげなmixinを物色したところ、なかなかなかったので、作ってみました。

これからRetinaで苦労するであろう誰かの助けになれば嬉しいです。

今回作ってみたmixinはGitHubからダウロードできます。

使い方

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
end

2. 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);

widthheight が要らないとき:

@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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

LIGの王です。ウェブの全てを学ぶ為、中国は四川省より日本にやってきました。王という名に恥じぬよう、ウェブ業界のKINGとなるべく日々頑張っております。よろしくお願いいたします。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL