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

kokoe

2014.08.12

フロントエンジニア

コーダーのココエです。

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

目次
画像のファイルパスを返すimage-url()
- $path(必須)
  - 表示画像: /images/img.png
- 第2引数： $only-path(デフォルトfalse)

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

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

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



		
		
			
			

			
			[sourcecode lang="ruby"]
    image-url($path, [$only-path], [$cache-buster])
[/sourcecode]
			
				
					
				
					1
2
3
				
						[sourcecode lang="ruby"]
    image-url($path, [$only-path], [$cache-buster])
[/sourcecode]

$path(必須)

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

表示画像: /images/img.png



		
		
			
			

			
			[sourcecode lang="ruby"]
//config.rb
images_dir = &quot;images&quot;
[/sourcecode]
			
				
					
				
					1
2
3
4
				
						[sourcecode lang="ruby"]
//config.rb
images_dir = &quot;images&quot;
[/sourcecode]



		
		
			
			

			
			[sourcecode lang="css"]
//scss document
#section1 {
    background: image-url(&quot;img.png&quot;, false, false);
}
[/sourcecode]
			
				
					
				
					1
2
3
4
5
6
				
						[sourcecode lang="css"]
//scss document
#section1 {
    background: image-url(&quot;img.png&quot;, false, false);
}
[/sourcecode]



		
		
			
			

			
			[sourcecode lang="css"]
/* CSS document */
#section1 {
    background: url('/images/img.png');
}
[/sourcecode]
			
				
					
				
					1
2
3
4
5
6
				
						[sourcecode lang="css"]
/* CSS document */
#section1 {
    background: url('/images/img.png');
}
[/sourcecode]

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

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

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



		
		
			
			

			
			[sourcecode lang="css"]
//scss document
#section1 {
    background: url( image-url(&quot;img.png&quot;, true, false) );
}
[/sourcecode]
			
				
					
				
					1
2
3
4
5
6
				
						[sourcecode lang="css"]
//scss document
#section1 {
    background: url( image-url(&quot;img.png&quot;, true, false) );
}
[/sourcecode]



		
		
			
			

			
			[sourcecode lang="css"]
/* CSS document */
#section1 {
    background: url(/images/img.png);
}
[/sourcecode]
			
				
					
				
					1
2
3
4
5
6
				
						[sourcecode lang="css"]
/* CSS document */
#section1 {
    background: url(/images/img.png);
}
[/sourcecode]

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

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

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



		
		
			
			

			
			[sourcecode lang="css"]
//scss document
#section1 {
    background: image-url(&quot;img.png&quot;, false, true);
}
[/sourcecode]
			
				
					
				
					1
2
3
4
5
6
				
						[sourcecode lang="css"]
//scss document
#section1 {
    background: image-url(&quot;img.png&quot;, false, true);
}
[/sourcecode]



		
		
			
			

			
			[sourcecode lang="css"]
    /* CSS document */
    #section1 {
        background: url('/images/img.png?1361504830');
    }
[/sourcecode]
			
				
					
				
					1
2
3
4
5
6
				
						[sourcecode lang="css"]
    /* CSS document */
    #section1 {
        background: url('/images/img.png?1361504830');
    }
[/sourcecode]

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

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

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



		
		
			
			

			
			[sourcecode lang="ruby"]
    image-width($image)
    image-height($image)
[/sourcecode]
			
				
					
				
					1
2
3
4
				
						[sourcecode lang="ruby"]
    image-width($image)
    image-height($image)
[/sourcecode]

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



		
		
			
			

			
			[sourcecode lang="css"]
//scss document
#section1 {
    .banner {
        width: image-width('img.png');
        height: image-height('img.png');
    }
}
[/sourcecode]
			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						[sourcecode lang="css"]
//scss document
#section1 {
    .banner {
        width: image-width('img.png');
        height: image-height('img.png');
    }
}
[/sourcecode]



		
		
			
			

			
			[sourcecode lang="css"]
/* CSS document */
#section1 .banner {
    width: 100px;
    height: 50px;
}
[/sourcecode]
			
				
					
				
					1
2
3
4
5
6
7
				
						[sourcecode lang="css"]
/* CSS document */
#section1 .banner {
    width: 100px;
    height: 50px;
}
[/sourcecode]