メモログ

塵が積もって山とならないメモのログ

compass で sass の sourcemap を作る

sassのsourcemapを用意すると、Chromeのdeveloper toolsを使ったときにscssファイルでスタイルのinspectができるようになるので、非常に便利。詳細はSassファイルでの記述位置を知るより美しい方法|Blog|Skyward Designなどを参照。

ということで、compassでsassのsourcemapを生成したい。いろいろ試してみたのですが、とりあえずうまくいった手順が下記のような感じ。まずはインストール。preview版なのでインストール後に問題起こるかもしれません。

1
2
gem install sass --pre
gem install compass-sourcemaps --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」みたいなエラーが発生しました。時が経てば使えるようになるかも。

というメモ。