sassのsourcemapを用意すると、Chromeのdeveloper toolsを使ったときにscssファイルでスタイルのinspectができるようになるので、非常に便利。詳細はSassファイルでの記述位置を知るより美しい方法|Blog|Skyward Designなどを参照。
ということで、compassでsassのsourcemapを生成したい。いろいろ試してみたのですが、とりあえずうまくいった手順が下記のような感じ。まずはインストール。preview版なのでインストール後に問題起こるかもしれません。
1 | gem install sass --pre |
そして、config.rbに下記を追加。
1 | sass_options = { :sourcemap => true } |
これで compass --compile を実行したら、css_dirの同じ場所に css.map ファイルができるようになりました。
本当はgrunt-contrib-compassのタスクでsourmapを作成したかったのですが、compass-sourcemapsのcompassでは、options.timeが有効になっている場合にsourcemapを作成するとエラーになってしまう(grunt-contrib-compassのタスクの中でcompass cleanの実行ではない場合はoptions.timeを有効にするようになっている)。ので、そのうち…
あと sass --pre と compass --pre の組み合わせも試してみましたが、試した時点では、compass compileも、sass --compassもどちらもsource mapを作成できませんでした。sass --compassの方は、compassのrequireに失敗して「Could not find compass」みたいなエラーが発生しました。時が経てば使えるようになるかも。
というメモ。