Sass のソースマップの使い方
JavaScript のソースマップがあまりにも便利なので、 もはやソースマップ無しでは開発がツライという感じなのですが、 最近ふと Sass にもソースマップがあったことを思い出しました。 ということで Sass でソースマップを使う方法をまとめておきます。 いまさら感がとんでもなくスゴイですが、誰かのお役に立てれば幸いです。
ソースマップとは？
ソースマップについておさらいしてみましょう。 Sass の使い方がわからないという方は、まずは「Sass の使い方（その１：概要）」を参考にしてください。
Sass で複数の Sass ファイル（.scss、.sass）を1つの CSS ファイル（.css）にコンパイルしてしまうと、 Web ブラウザでスタイルの確認をする際に、どのファイルの、どの行のスタイルが適用されているのかを探すのが難しくなります。 何故なら、適用されている CSS ファイルはコンパイル後のファイルであって、 修正しないといけないのはコンパイル前の Sass ファイルだからです。 CSS ファイルを圧縮（minify）した場合は、さらに難しくなります。
そこで登場するのがソースマップファイル（.map）です。 CSS のソースマップファイルは拡張子が .css.map になります。 CSS のソースマップファイルがあると、Web ブラウザは、コンパイル後の CSS ファイルと、コンパイル前の Sass ファイルを結び付けることができるようになります。 それにより、Web ブラウザのデベロッパーツール（開発者ツール）などで、コンパイル前の Sass ファイルでの場所を表示してくれるようになります。
JavaScript にも同じソースマップファイル（.js.map）がありますので、そちらの方がなじみが深いかもしれません。 ソースマップファイルがあると開発時にデバッグしたりするのが容易になりますのでオススメです。
なお、動作確認をする際はキャッシュが効いてる可能性があるので、 ハードリロード（スーパーリロード）を忘れないようにしましょう。
方法１：デフォルトのソースマップファイルを出力する
Sass ではソースマップファイル（.css.map）は、デフォルトで出力されるようになっています。
sass コマンドをオプション無しで実行すると、ソースマップファイルが出力されます。
sass assets/sass:public/css
このデフォルトのソースマップファイルには１つ問題があります。 Sass ファイル（.scss、.sass）を非公開ディレクトリに置いている場合、 Sass ファイルでの場所は表示されますが、クリックするとエラーになります。 Chrome の場合だと、"Could not load content for （ファイルのURL） (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)" のように表示されるようです。
これは、デフォルトのソースマップファイルでは、 Sass ファイルへのアクセスが HTTP リクエストになってしまうことが原因です。 Sass ファイルを公開ディレクトリ（ドキュメントルート配下）に置いている場合はこれでも問題はないのですが、普通は置かないと思います。 Sass ファイルからコンパイルした CSS ファイル（.css）だけを公開ディレクトリに置くはずです。 Sass ファイルが非公開ディレクトリに置いてある場合、HTTP リクエストで 404 Not Found になってしまいますから、 Sass ファイルを読み込むことができず、ソースマップが正しく機能しないのです。
方法２：ソースマップファイルに Sass ファイルを埋め込む
Sass ファイル（.scss、.sass）を非公開ディレクトリに置いている場合、 Sass ファイルを HTTP リクエストでは取得することができません。 ではどうするかというと、ソースマップファイル（.css.map）の中に Sass ファイルを埋め込むという方法があります。 こうすることで Sass ファイルへの HTTP リクエストがなくなるため、404 Not Found を回避することができます。 なお、当然と言えば当然なのですが、ソースマップファイルに Sass ファイルが埋め込まれるようになるため、 ソースマップファイルのサイズはその分だけ大きくなります。
Sass ファイルを非公開ディレクトリに置いている場合、通常はこの方法を使用することになるのではないでしょうか。 Sass ファイルが正しく読み込めていれば、その Sass ファイルの内容が Web ブラウザ上に表示されます。 ソースマップが正しく機能している証拠です。
ソースマップファイルに Sass ファイルを埋め込むには、--embed-sources オプションを使用します。
sass --embed-sources assets/sass:public/css
方法３：CSS ファイルにソースマップファイルを埋め込む
CSS ファイル（.css）にソースマップファイル（.css.map）を埋め込むこともできます。 あまり用途は思いつきませんが、例えばソースマップファイルにアクセス制限がかかっているサーバーの場合などでしょうか。 CSS ファイルにソースマップファイルが埋め込まれているので、ソースマップファイルへの HTTP リクエストが発生しません。
Sass ファイル（.scss、.sass）を公開ディレクトリ（ドキュメントルート配下）に置いている場合は、 この方法でも問題ないように感じますが、普通は公開ディレクトリには置きません。 また、ソースマップファイルにアクセス制限がかかっているようなサーバーでは、 おそらく Sass ファイルにもアクセス制限がかかっていることでしょう。 結局ソースマップは正しく機能しません。
また、Sass ファイルを非公開ディレクトリに置いている場合は、 Sass ファイルへの HTTP リクエストが発生して 404 Not Found になってしまうため、 これでもソースマップは正しく機能しません。
つまり、この方法が正しく機能するのは、 ソースマップファイルには HTTP リクエストできないが Sass ファイルには HTTP リクエストできるという、 かなり特殊な状況ということになります。 サーバーの設定を見直して、上述の方法２が使用できるように設定した方が良いでしょう。
CSS ファイルにソースマップファイルを埋め込むには、--embed-source-map オプションを使用します。
sass --embed-source-map assets/sass:public/css
方法４：CSS ファイルにソースマップファイルと Sass ファイルを埋め込む
では、上述の方法２の --embed-sources オプションと、
方法３の --embed-source-map オプションの両方を同時に指定するとどうなるでしょうか？
sass --embed-sources --embed-source-map assets/sass:public/css
理論的には CSS ファイル（.css）の中にソースマップファイル（.css.map）と Sass ファイル（.scss、.sass）が埋め込まれることになるため、 ソースマップファイルと Sass ファイルに HTTP リクエストすることなく Sass ファイルを見れるはずです。 用途としては、ソースマップファイルにアクセス制限がかかっている場合ということになるでしょうか。
しかしこれは Web ブラウザ側の動作に少し問題があるようで、 Firefox ならちゃんと Sass ファイルを見れるのですが、Chrome（Edge）では何故か見れないようです。 Firefox では見れるので Chrome のバグのような気もしなくもないのですが、単純に対応していないだけなのかもしれません。 素直にソースマップファイルにアクセスできるようにサーバーの設定を変更した方が良いのではないでしょうか。
方法５：ソースマップファイルを出力しない
ソースマップファイル（.css.map）は開発時のみ必要になるファイルなので、本番環境では不要でしょう。 また、開発時であっても、コンパイル前の Sass ファイル（.scss、.sass）より、 コンパイル後の CSS ファイル（.css）の方がわかりやすくて、ソースマップファイルは不要という方もいると思います。
ソースマップファイルを出力しないようにするには、--no-source-map オプションを使用します。
sass --no-source-map assets/sass:public/css
