🧊

Compassのsprite-mapのlayout: smartでspacingを有効にする

ほんとはこうしたい。

$sprites: sprite-map("sprite/*.png", $layout: smart, $spacing: 8px);

けど、今のCompassの仕様では、layout: smart の場合、spacing の指定ができません。
できてもいいと思うけど・・というわけで。

ちなみに、Compassのバージョンは、0.13です。

有効にする方法

  • 本家のモジュールを直接修正する
  • 本家のモジュールをコンパイル時だけ拡張する
  • あきらめて自作のmixinでやる

調べた限りこんな具合でした。
最後の1つはもう手に負えない感があるので諦めるとして、ここでは前2つについて。

ここでスプライトの配置を計算してる

現場はこのファイル。

PATH/TO/YOUR/COMPASS_DIR/lib/compass/sass_extensions/sprites/layout_methods.rb

で、layout: smartのときにrequireされてる

PATH/TO/YOUR/COMPASS_DIR/lib/compass/sass_extensions/sprites/layout/smart.rb

ここの、 calculate_positions ってのを修正すればよさそう。

どう修正するか

これ見るのが早いです。

参考: css3 - Generate sprites with compass with smart layout and spacing - Stack Overflow

関数名が違うのは、おそらく0.12以前の仕様やからですね。

これをどうにか反映させればOKぽい！

どう使うか

本家のモジュールを直接修正する

PATH/TO/YOUR/COMPASS_DIR/lib/compass/sass_extensions/sprites/layout/smart.rb

の

def calculate_positions!
# ...
end

このブロックの実装を、まるっと上記リンクのコードに差し替える。
それでもいいけど、できれば本家に手はいれたくないですよねー。

本家のモジュールをコンパイル時だけ拡張する

Compassの設定で、オレオレrubyコードをrequireするオプションがあるのでそれを使う。

config.rb
# layout: smartでspacing使う設定
require 'path/to/layout_smart_with_spacing_v0.13.rb'
http_path = "/"
css_dir = "../_build/css"
# ...

てな具合に記述。

grunt-contrib-compass
options: {
  // layout: smartでspacing使う設定
  require: 'path/to/layout_smart_with_spacing_v0.13.rb',
  sassDir: './static/app/style',
  // ...
}

grunt派も安心！

で、肝心のコードは以下。


Use layout smart with spacing at compass sprite-ma ...


これでちゃんと動くはず。
PullRequest自体は前々からあるっぽいので、なんしかはよ本家にmergeされてほしいものですねー。