[scss]ブラウザの検証で.cssじゃなく.scss（.sass）が表示される場合の理由

知らないとscssをそのまま使えるって勘違いする場合がある。

どういうことか

webサイトを巡ってて組み方を参考にしたいとかで検証を開くことがある。

chromeだと「style」のタブで装飾内容とそれを記述してる元ファイルがわかる。

で、元ファイルは基本的に.cssなんだけど、たまに.scssとかがある。

.scssをコンパイルして.cssを作る際に.css.mapも生成される。

.css.mapがあることで.scssのどの部分が該当するのかが検証内でわかるという仕組み。

実際のところ、ブラウザで読み込まれてるのは.css。検証内の表示が.scssになってるだけ。

.scssの該当箇所がわかればどこに手を付けていいかわかる、コーダーのためのアシスト機能だと思っておけばいい。