Middleman で CSS Sprite をつかう

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

% middleman version
Middleman 3.3.6

Contents

準備

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

main.scss

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

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

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

index.html.erb

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

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

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

config.rb

http_path = "/"
images_dir = "images"
relative_assets = true

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

config.rb

# Change Compass configuration
compass_config do |config|
end

main.css

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

あとは必要に応じて :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");