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

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

“`prettyprinted
% middleman version
Middleman 3.3.6
“`

## 準備

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

“`css: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 に下記の記述を加えます。

“`html:index.html.erb

CSS Sprites sample

“`

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

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

> [Compass: CSS Sprite で画像ナビゲーションを作成する | deadwood](https://www.d-wood.com/blog/2014/08/12_6595.html)

“`ruby:config.rb
http_path = “/”
images_dir = “images”
relative_assets = true
“`

## Middleman で利用したときの設定

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

“`ruby:config.rb
# Change Compass configuration
compass_config do |config|
end
“`

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

### :relative_assets

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

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

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

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