compassで画像を扱う

cssでは背景に画像を指定することが良くあります。普通はbackground-image: url(../images/bg.png); のように書くことでしょう。しかしこの方法ではフォルダレイアウトを変更すると、すべての指定を書き換えなければなりませんし、CMSではこのような相対指定が使えない場合もあります。このような不便を解消するためにcompassでは画像を特別な方法であつかいます。

Web

画像のURLを指定する

compassではbackground-image: url(“../images/bg.png”); のかわりに

background-image: image-url(“bg.png”);

と書きます。（もちろん従来通りにurlを記述してもかまいません。）
画像ファイル名の前にフォルダ名がないことに注意してください。compassは画像フォルダの位置を管理しているため、フォルダを指定する必要はないのです。

画像フォルダの位置を指定する

画像フォルダの位置はプロジェクトのconfig.rbファイルで指定されます。

images_dir = "images"

この行をたとえば images_dir = "img" と変更すれば、プロジェクト内のimgフォルダが画像フォルダとなり、全ての画像はその中にあるものと仮定されます。
またCMSでは画像のURLとしてサイトルートからの絶対URLが必要なことがあります。compassはデフォルトではプロジェクトフォルダをルートとした絶対パスを生成しますが、プロジェクトフォルダをサイトルートに配置できるとは限りません。
このようなときはconfig.rbファイルの http_path に、サイトルートからプロジェクトフォルダへのパスを指定してください。画像URLはhttp_pathの指定と画像フォルダの指定をあわせて作られるので、サイトルートからの正しい絶対URLを得ることができます。

画像サイズを取得する

.some-button {
  background-image: image-url(“button.png”);
  width: image-width(“button.png”);
  height: image-height(“button.png”);
}

HTML要素のサイズを決めるとき、背景画像の大きさにあわせたいことがあります。そのために image-width と image-height 関数が用意されています。
これをうまく使えば画像ファイルを更新するだけで必要なサイズ指定をすべて変更することができるようになります。

compassコンパイラはソースに変更がない限りコンパイルしないことを思い出してください。画像を変更してもソースファイルに変更がなければ、コンパイルは行われません。このようなときには compass --force compile のように--forceオプションを指定して、強制的にコンパイルをするようにします。

その他のエントリー

Eclipseでcompassを使う

2014年7月19日 (土) 掲載

Web開発のとき統合開発環境としてEclipse（あるいはAptanaStudio）を使用している人は多いでしょう。ここではEclipseのビルドシステムを使ってcompassをコンパイルする方法を説明します。

メディアクエリの書き方 [sass]

2014年7月19日 (土) 掲載

最近のWebデザインではメディアクエリを使用したレスポンシブデザインが必須となっています。sassでももちろんメディアクエリはサポートされています。sassならではの拡張がされているので複雑になりがちなメディアクエリもスッキリと書けるようになります。