2014.08.12

Compassでよく利用するimageヘルパの使い方

コーダーのココエです。

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

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

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


    image-url($path, [$only-path], [$cache-buster])

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


//config.rb
images_dir = "images"


//scss document
#section1 {
    background: image-url("img.png", false, false);
}


/* CSS document */
#section1 {
    background: url('/images/img.png');
}

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

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


//scss document
#section1 {
    background: url( image-url("img.png", true, false) );
}


/* CSS document */
#section1 {
    background: url(/images/img.png);
}

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

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


//scss document
#section1 {
    background: image-url("img.png", false, true);
}


    /* CSS document */
    #section1 {
        background: url('/images/img.png?1361504830');
    }

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


    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のヘルパを紹介します。

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