コーダーのココエです。

前回の記事Sassの変数使用時に覚えておきたい6つのことの予告通り、Compassで用意されているヘルパの一部を紹介します。

目次

  • image-url()
  • image-width()
  • image-height()

画像のファイルパスを返すimage-url()

画像のファイルパスをいい感じで返してくれるヘルパです。

http://compass-style.org/reference/compass/helpers/urls/#image-url

$path(必須)

画像パスを指定。
config.rb の images_dir で指定したディレクトリ以降の階層を指定します。

表示画像: /images/img.png

第2引数: $only-path(デフォルトfalse)

url()付きで書き出しするかどうか。デフォルトはfalse

上記サンプルソースのように、falseの状態ではurl()付きで書き出しされますが、trueにするとパスのみが書き出しされます。

続きを読む

第3引数: $cache-buster(デフォルトtrue)

キャッシュバスタを適用するかどうか。デフォルトはtrue

コンパイル時、第1引数で指定したパスの画像が更新されたことが検知されると、パスの後ろにクエリを付けてくれます。キャッシュを効かせたくない時に便利ですね。

画像のサイズを返すimage-width(), image-height()

画像のサイズを返してくれるヘルパです。

http://compass-style.org/reference/compass/helpers/image-dimensions/

使い方はカンタン、引数にパスを入れるだけ。
※パスの指定は、こちらもconfig.rbのimages_dirで指定したディレクトリ以降の階層で指定します。

次回も引き続きCompassのヘルパ紹介でいきましょうかね~。CSSスプライトでよく使うcompassのヘルパを紹介します。

  • sprite-url()
  • sprite-path()
  • sprite-position()
  • sprite-file()

このあたりかな。ではでは。

あわせて読みたい記事