久々にSassを使うことになったんでVSCodeにLive Sass Compilerという拡張機能をぶち込んだんですが、コンパイルされたCSSファイルの出力先を一個上の階層にするという方法がちょっとだけ分かりにくかったんでメモ。

CSSファイルの出力先を変更するまでの流れ

出力先の指定方法

特に指定しなかった場合

特に出力先を変更しなかった場合、Sassファイルと同じ階層にCSSファイル（とマップファイル）が出力されます。

絶対パス

ワークスペースをrootとした絶対パスで出力したい場合は、頭に「/」を付けてパスを書けばOK。

下記の指定だとrootの直下にある「cssフォルダ」にcssファイルが出力されます。

相対パス

Sassファイルからの相対パスで指定したい場合、頭に「~」を付けます。個人的にはこっちのほうが色々な場面に対応できるので好き。

例えば下記の指定をすれば「一個上の階層」にCSSファイルが出力されるようになります。

次、「Sassファイルと同じ階層にあるCSSフォルダ」に出力したいならこんな感じ。

最後、同階層に「cssフォルダ」と「scssフォルダ」を分けて管理してる人なら、こういうパスを書いとけばOKです。

---

これだけ覚えとけば出力先で悩むことは無いと思いますが、一応公式ドキュメントへのリンクも置いておきますんで、参考にどうぞ。