SASSでsourcemapを使う時のメモ
2014年01月06日
前にも同じ事やった気がするんだけど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が使えるようになってデベロッパーツールでの確認がしやすくなってウハウハです。多分。知らんけど。
他にこんな事も書いてます
- 春のJavaScript祭りでAngularJSについてお話ししてきました
- Dashすげー便利
- Grunt+ST2な人がプロジェクトをチャチャっと開始する方法
- ローカルマシンにNode.jsをインストール
- AngularJSでページロード時にコンパイル前のタグが表示されるのを防ぐ
- スクロールで隠れるナビゲーションメニューのJSがステキだったので勝手にプラグイン化しました
- PHPのvar_dumpをChromeのconsole.logとして出力する
- スペースキーでスクロールする人のためのjQueryプラグイン作った
- CoffeeScript覚え書き
- SublimeText2 で Apache の conf ファイルに色つけする
FBでコメント