コーダーのココエです。
前回の記事Sassの変数使用時に覚えておきたい6つのことの予告通り、Compassで用意されているヘルパの一部を紹介します。
目次
- image-url()
- image-width()
- image-height()
画像のファイルパスを返すimage-url()
画像のファイルパスをいい感じで返してくれるヘルパです。
http://compass-style.org/reference/compass/helpers/urls/#image-url
image-url($path, [$only-path], [$cache-buster])
$path(必須)
画像パスを指定。
config.rb の images_dir で指定したディレクトリ以降の階層を指定します。
表示画像: /images/img.png
//config.rb images_dir = "images"
//scss document #section1 { background: image-url("img.png", false, false); }
/* CSS document */ #section1 { background: url('/images/img.png'); }
第2引数: $only-path(デフォルトfalse)
url()付きで書き出しするかどうか。デフォルトはfalse
上記サンプルソースのように、falseの状態ではurl()付きで書き出しされますが、trueにするとパスのみが書き出しされます。
//scss document #section1 { background: url( image-url("img.png", true, false) ); }
/* CSS document */ #section1 { background: url(/images/img.png); }
第3引数: $cache-buster(デフォルトtrue)
キャッシュバスタを適用するかどうか。デフォルトはtrue
コンパイル時、第1引数で指定したパスの画像が更新されたことが検知されると、パスの後ろにクエリを付けてくれます。キャッシュを効かせたくない時に便利ですね。
//scss document #section1 { background: image-url("img.png", false, true); }
/* CSS document */ #section1 { background: url('/images/img.png?1361504830'); }
画像のサイズを返すimage-width(), image-height()
画像のサイズを返してくれるヘルパです。
http://compass-style.org/reference/compass/helpers/image-dimensions/
image-width($image) image-height($image)
使い方はカンタン、引数にパスを入れるだけ。
※パスの指定は、こちらもconfig.rbのimages_dirで指定したディレクトリ以降の階層で指定します。
//scss document #section1 { .banner { width: image-width('img.png'); height: image-height('img.png'); } }
/* CSS document */ #section1 .banner { width: 100px; height: 50px; }
次回も引き続きCompassのヘルパ紹介でいきましょうかね~。CSSスプライトでよく使うcompassのヘルパを紹介します。
- sprite-url()
- sprite-path()
- sprite-position()
- sprite-file()
このあたりかな。ではでは。