SASSでsourcemapを使う時のメモ

前にも同じ事やった気がするんだけどMarvericksに上げるときにクリーンインストールしたからかsassのバージョンが低くてGruntのgrunt-contrib-sassでsourcemapオプションが使えなくなってたのでいい加減覚えておけるようにメモ。

つかgrunt-contrib-sassのREADME.mdに書いてあった。いやーGruntステキ。

$ gem install sass --pre

これを実行すれば2014年1月現在は3.3.0.rc.2がインストールされる。

以下、sourcemapの簡単な説明なので知ってる人はこれ以上読まなくて良いと思うよ。

sourcemapとは、Chromeとかののデベロッパーツールで表示される「この要素のスタイルはstyle.cssの〜行目にかかれてる」的なやつを「cssファイルの何行目」じゃなくて「sassファイルの何行目」って表示してもらうための機能。

sassで書いてると生成するcssファイルは大抵1ファイルにまとめてしまうからデベロッパーツールで確認するときにsassのどのファイルかってのがぱっと見で分かんないからたまに面倒だと思う。それを解消してくれる。

必要な作業自体はmapファイルを作成してcssファイルの末尾（じゃなくてもいいんかもだけど）に作成したmapファイルへのパスをコメントで記述すればブラウザがそれを読み取ってデベロッパーツールに表示させてくれる感じなんだけど、sassのバージョンが3.3以降であればsourcemapを自動で作ってくれるオプションがあるわけです。もちろんcssファイルにも記述してくれる。それがやれると嬉しいわけです。なのでsassのバージョンを上げたいわけです。

ということで上のコマンドを入力すればsassのバージョンが上がってsourcemapが使えるようになってデベロッパーツールでの確認がしやすくなってウハウハです。多分。知らんけど。