Sass（+ Compass）：Firebug やデベロッパーツールで SCSS の該当行を表示

スポンサードリンク

こんにちはピンクです。確定申告の季節ですね！青色申告の私は毎年この時期、宿題を溜めてしまった夏休み最終日の小学生のようになっています…。

さて、Sass ネタです。

Firefox の Firebug や、Chrome のデベロッパーツールで要素のスタイルを確認すると、どのスタイルシートの何行目に記述があるか分かるようになっています。

上図は Firebug で適当にとったキャプチャです。「スタイルシート名.css」の n 行目に記述があるよー、と書いてありますね。デフォルトではここは .css の何行目か、しか見てくれません。

Sass（.scss）で書いて表示確認をして「ああ～ここ少し調整したいな…」なんて時、「コンパイル後の .css ファイルの行だけ分かっても、その前の .scss の行が分からないよ、めんどくさいー！」ということになりがちです。

そこで今回は .scss の行を表示してくれるようにしてみましょう。Compass 側の設定とブラウザの設定の 2 段階ですが、簡単なので是非。

Compass 側の設定

Compass の設定ファイル config.rb に、以下のように書きましょう。※config.rb の詳細については、私が以前書いた「Sass + Compass の基本導入と設定ファイル config.rb について | WP-D」を確認してみてください。

sass_options = (environment == :production) ? { :debug_info => false } : { :debug_info => true }

これは、environment（環境設定）が :production（本番）だったら :debug_info を false にして、そうじゃなかったら :debug_info を true にする、という指定です。true になっていると CSS にデバッグインフォが出力されます。デバッグインフォ内には ○○○.scss の n 行目だよーという情報が含まれています。

デバッグインフォがずらずらあるのを本番環境にアップするのはどうなのよーってなるので、environment を使って書き出し分けるようにしています。environment はデフォルトでは :development（開発）になってるので、特に指定していなければ :debut_info は true になります。

普段は以下のコマンドで監視。デバッグインフォも出力されます。