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に対応させることで簡単にわかるようになります。

まずはターミナルから以下のコマンドを入力して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のインスペクタの右下にある歯車のマークをクリックしExperimentsを選択し、「Sass stylesheet debugging」にチェックを入れます。

Experiments

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

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

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

SettingsのGeneralにあるEnable source maps

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

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

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

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

最近のエントリー