[Middleman 3] Middleman: CSS の image や font url には URL ヘルパを使おう

Middleman や Rails のような Compass をつかったプロジェクトで image や font url を書く場合は、Compass URL Helpers を使おう。
を忘れるので memo.

[markdown]
## Compass URL Helpers

config.rb の `:images_dir` や `:fonts_dir` といった設定が活かせる事がポイント。

> [Compass URL Helpers | Compass Documentation](http://compass-style.org/reference/compass/helpers/urls/)

例えば .scss ファイル内でこんな形で書けます。
font-url

“`css
@font-face {
font-family: ‘icomoon’;
src: url(‘/fonts/icomoon.eot?ltltym’);
“`

> [@font-face – CSS | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/@font-face)

“`css
@font-face {
font-family: ‘icomoon’;
src: font-url(‘icomoon.eot?ltltym’);
“`

image-url

“`css
body {
background-image: url(“/images/darkpattern.png”);
“`

> [background-image – CSS | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/background-image)

“`css
body {
background-image: image-url(“darkpattern.png”);
“`

### パスの変更

config.rb の設定で、パスが変わってもかんたんに対応できます。

“`ruby:config.rb
config[:fonts_dir] = ‘fonts’
config[:images_dir] = ‘images/foo/bar/’
“`

### 相対パスへ変更

このような絶対パスを

“`css
body {
background-image: url(“/images/darkpattern.png”);
“`

config.rb に以下の設定を加えることで、

“`ruby:config.rb
# Use relative URLs
activate :relative_assets
“`

相対パスに一括で変更できます。

“`css
body {
background-image: url(“../images/darkpattern.png”);
“`

## 補遺

> * [Middleman: テンプレートヘルパ](http://middlemanapp.com/jp/basics/helpers/)
> * [Middleman: 公式サイトで紹介されている機能を確認する | deadwood](https://www.d-wood.com/blog/2014/02/25_5601.html#i-4)
> * [Middleman: Asset Pipeline に関連する helper | deadwood](https://www.d-wood.com/blog/2014/10/21_7070.html)
[/markdown]