Source MapでSass/Compassを簡単にCSSをデバッグする

このエントリーをはてなブックマークに追加

Sassはα版が公開されている3.3.0からSource Mapに対応しています。このSource Mapを利用するとCSSのデバッグや開発を簡単にしてくれるのでその方法を紹介します。

Sass/Compassで作成したCSSをGoogle Chromeのインスペクタで確認しようとすると以下のように対応するCSSファイルの行数が表示されます。

Google Chrome

これでは何行目のScssファイルをいじったらよいかわかりませんが、Source Mapに対応させることで簡単にわかるようになります。

これは、「Google ChromeでCSSがSassの何行目に記述されているか確認する方法」のSource Map対応バージョンです。

インストール

まずはターミナルから以下のコマンドを入力してSass3.3.0のα版をインストールしましょう。
(最新のα版では動かなかったので今回はalpha.136)

sudo gem install sass -v 3.3.0.alpha.136 --pre

最新はSass 3.3.0.alpha.229だけど、Sass 3.3.0.alpha.229をインストールするとGEMのlistenモジュールがアップデートされて以下のようなエラーが出てCompassがWatchできなくなります。

NameError: uninitialized constant Listen::MultiListener

Sass 3.3.0.alpha.229をインストールしてしまった場合は以下のコマンドでアンインストールしlistenモジュールを元にもどしましょう。

sudo gem uninstall sass -v 3.3.0.alpha.229
sudo gem uninstall listen -v 1.1.6
sudo gem install listen -v 0.7.3

CompassはまだSource Mapに対応していないので、Sassからsourcemapオプションとcompassオプションを付けてWatchします。

sass --sourcemap --compass --watch sass/style.scss:stylesheets/style.css

そうするとstyle.scssに変更が加えられるとstyle.cssとstyle.css.mapが生成されるようになります。

Google Chromeの設定

Google Chromeのインスペクタの右下にある歯車のマークをクリックしExperimentsを選択し、「Sass stylesheet debugging」にチェックを入れます。

Experiments

「Experiments」はデフォルトでは表示されないのでURLバーに「chrome://flags」と入力して、「デベロッパー ツールのテストを有効にする 」を有効にしてください。

デベロッパー ツールのテストを有効にする

さらに、SettingsのGeneralにあるEnable source mapsにもチェックを入れておきましょう。

SettingsのGeneralにあるEnable source maps

ローカルサーバーの立ち上げ

このままでは、まだデバッグできませんので以下のURLを参照にローカルーサーバーを立ち上げます。

ローカルのWebサイトを確認する方法 - to-R

これでサイトを確認するとCSSファイルではなくSassファイルで何行目かが出力されます。

Sassファイルの行数が表示される

関連エントリー

Google Chromeでスマホサイト制作
Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する
CodeKitで簡単にCSS Preprocessorを利用する!
Compassでスプライト画象を高速に書き出す方法
CompassでデータURI スキーム
CompassでCSSスプライト

スポンサードリンク

«ローカルのWebサイトを確認する方法 | メイン | FacebookがWebサイトへの埋め込み機能を提供»

このエントリーのトラックバックURL
コメントを投稿