Hail2u.net

Sassと相対URLの管理

Sass@importディレクティブは単にファイルを連結するだけで、インポートしたライブラリで使われている相対URLもそのまま出力される。そのためそのライブラリと生成されるCSSファイルの階層が噛みあっていないと、相対URLで参照した画像やWebフォントなどが見つけられないことがある。なのでスラッシュで始まらない相対URLを使わないか、相対URLを一括して変数に代入して管理するだけのライブラリを生成されるCSSと同じ階層に置くのが無難そう。

Vimで長い行があるとスクロールがとても重くなるとかいう理由でちょっと前にData URIにした画像やWebフォントをサブ・ディレクトリに分けて管理しはじめたんだけど、これは良くなかった。Data URIに変換し終えていれば相対URLがうまく解決できない問題はもちろん起こらないんだけど、テスト中には一々Data URIに変換したりせず相対URLで書いてテストしたいのでその時に色々面倒くさい。

相対URLを書く時にその基準となる階層が違うことがあるということを意識して書くのはあまりにも馬鹿げているので、なんか良い方法ないかなーと考えているけど思いつかない。ベスト・プラクティス的な考え方だとスラッシュ始まりの相対URLで統一するという結論になりそう。HTMLのbase要素的なのがSassにもあれば良さそうだけどないものはないしな。