, , ,

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

公開日: 2014/12/19
更新日: 2018/10/29

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

Contents

Compass URL Helpers

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

Compass URL Helpers | Compass Documentation

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

@font-face {
  font-family: 'icomoon';
  src: url('/fonts/icomoon.eot?ltltym');

@font-face – CSS | MDN

@font-face {
  font-family: 'icomoon';
  src: font-url('icomoon.eot?ltltym');

image-url

body {
  background-image: url("/images/darkpattern.png");

background-image – CSS | MDN

body {
  background-image: image-url("darkpattern.png");

パスの変更

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

config.rb
config[:fonts_dir]  = 'fonts'
config[:images_dir] = 'images/foo/bar/'

相対パスへ変更

このような絶対パスを

body {
  background-image: url("/images/darkpattern.png");

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

config.rb
  # Use relative URLs
  activate :relative_assets

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

body {
  background-image: url("../images/darkpattern.png");

補遺