ChromeのデベロッパーツールでSCSSを検証

ChromeのデベロッパーツールでSCSSを検証

こんにちは。開発部の「ひっでもん」です。(名前変えようかな)

今回はChormeデベロッパーツールでSCSSを表示する方法を紹介します。

 

デベロッパーツールでCSSを検証している際、CSSファイルの場所を特定できますが、それを吐き出しているSCSSファイルの場所は特定されません。そのため特定のスタイルを探すために複数のSCSSファイルを開いて確認したり、Find機能を使ったりして見つけ出す必要がありました。そのような手間を回避するため、デベロッパーツールでSCSSが表示されるよう設定していきましょう。

 

デベロッパーツールでSCSSを表示するためにはソースマップというものを配置する必要があります。
ソースマップとはコンパイル前のオリジナルソースと、コンパイル後のソースをひもづけるためのファイルです。
ソースマップ作成の手順はとても簡単。config.rbで下記コードを追加し、コンパイルするだけです。

これでCSSファイルが書き出される階層に○○○.css.mapというファイルが生成されるようになりました。

 

ソースマップを配置した状態でサイトを閲覧し、Chromeデベロッパーツールを開くとSCSSファイルの場所が表示されるようになります。

以上、とても簡単ですが意外と知られていないことだったので紹介しました。ぜひ試してみてください。


Previous: 【初心者向け】PHPでできる配列の判定いろいろ Next: インハウスのイラストレーターとしての仕事

© 2017 ALL CONNECT Inc. All Rights Reserved.