[Middleman 3] Middleman で CSS Sprite をつかう

特に画像パスの設定・調整の必要は無く、すぐに使えました。

% middleman version
Middleman 3.3.6

準備

/source/css/main.scss にこんな記述を加えます。

main.scss
/* CSS Sprite */
$menus-sprite-dimensions: true;
@import "menus/*.png";
@include all-menus-sprites;
span {
  display:inline-block;
}

以下に画像を用意します。

  • /source/img/menus/hello.png
  • /source/img/menus/hello_hover.png

index.html.erb に下記の記述を加えます。

index.html.erb
<h2>CSS Sprites sample</h2>
<a href=""><span class="menus-hello"></span></a>

Compass 単体で利用したときの設定

(プロジェクトの構成によると思いますが)Compass 単体で利用したときには、config.rb にこんな設定で調整を行ったりしました。

Compass: CSS Sprite で画像ナビゲーションを作成する | deadwood

config.rb
http_path = "/"
images_dir = "images"
relative_assets = true

Middleman で利用したときの設定

Middleman でも下記の箇所に同様の調整が必要かと思いましたが、変更の必要がありませんでした。
標準のプロジェクト構成であれば、設定の必要はなさそうです。

config.rb
# Change Compass configuration
compass_config do |config|
end

2014-10-28_cssSprite_01

main.css
background-image: url("/img/menus-s292bb24f05.png");

:relative_assets

あとは必要に応じて :relative_assets を有効にする形でしょうか。

config.rb
# Build-specific configuration
configure :build do
  # Use relative URLs
  activate :relative_assets

有効化すると、下記のようになります。

main.css
background-image: url("../img/menus-s292bb24f05.png");