SONICMOOV Googleページ

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

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

  • このエントリーをはてなブックマークに追加

コーダーのココエです。

前回の記事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()

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

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

kokoe(フロントエンドエンジニア)

ソーシャルゲームのコーディングやってます。三度の飯よりコーディングが好きと言って入社させてもらった エンジニアのココエです。四度目は飯の方がいいです。

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation