compassのsprite-mapでlayout:smartにしつつ余白の設定をしたい。
compass仕様
- layout:smartとは
sprite内の画像配置方法の一つ。
自動で効率よく(=幅を取らない形で)並べてくれるレイアウト。 - layout:smartにした場合は余白の設定ができない。
compass本家マニュアル
Configuration options do not effect the layout
→余白が設定できないといより、layout:smartの場合、設定したoptionは無視されるってことだと思われる。
要件
- 画面全体をzoomして表示する必要がある。
問題
- spriteの縦or横が長くなり過ぎると、画面をzoomした際spriteの端画像がずれが目立つ。
- 同様に、余白が無いとzoomした際に隣の画像がはみ出てしまうことがある。
→つまりlayout:smartにしてspriteの縦横サイズを抑えつつ、余白を設定できれば解決！
対応方法
- 調べたら同じようなことをやりたい人がいる模様
Generate sprites with compass with smart layout and spacing - stack overflow
- こちらに答え(やりたいこと)が出ていた
Compassのsprite-mapのlayout: smartでspacingを有効にする - console.lealog();
- 今回の要件はチームメンバー全員が同じようにcompass compileできるようにしたいので以下方式を採用
本家のモジュールをコンパイル時だけ拡張する
拡張モジュールはリポジトリ内に抱える形で、config.rbで参照する。
qiita.rb
# config.rbの先頭で拡張モジュールを参照する
require './PATH/extend.rb'
↑の'./PATH/extend.rb'の中身はこんな感じ
これでOKでした。
ちなみに
こんな議論がされていました。
余白を指定したいならsmartは使うな、的なことを本家の方がおっしゃっています