メモログ

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

compass で sass の sourcemap を作る

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

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

gem install sass --pre
gem install compass-sourcemaps --pre

そして、config.rbに下記を追加。

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

というメモ。