Compiler」の設定方法を説明します。手軽にSassを書ける環境を作れるのでおすすめです。この機能には自動でベンダープレフィックス(Autoprefix)をつけてくれる機能もついているので、古いブラウザ対策もできます。説明する環境は以下の通りです。Compilerがあると便利です。インストールしてみましょう。Compiler」をインストール以下の画像にある番号にしたがってインストールします。Compilerの横にあるギアのアイコンをクリックします。そのまま「拡張機能の設定を構成します」をクリック。今回のプロジェクトのみ使うのであれば最初に「ワークスペース」を選択してください。次に「settings.jsonで編集」をクリック。開かれたsettings.jsonに以下のコピペします。]}設定内容を簡単に説明します。Compilerはワークスペース内にある拡張子scssファイルをどこにあっても見つけてくれます。今回の設定ではコンパイルしたコードをstyle.cssというファイルに出力して、cssフォルダの中にセットする設定をしています。ワークツリーでは以下のイメージです。Compilerはワークスペース内から拡張子scssファイルを探そうとするので、除外するフォルダを指定しています。Compilerのベンダープレフィックスの設定はBrowserslistをベースに行われます。ここの設定に沿ってベンダープレフィックスが自動でつくようになるので、お好きな設定を選んでみてください。Sass」をクリックします。これでstyle.scssにコードを書いて保存するだけでstyle.cssに出力されるようになります。出力を止めたいときは「watching...」をクリックしましょう。試しにstyle.scssにtranstionを書いてみると、以下のようにstyle.cssに変換されます。sassファイルを分割したいときは?sassファイルを分割して読み込ませることもできます。例として「_base.scss」と「_functions.scss」を作成してみます。ファイル名は何でも良いですがアンダーバーは必ずつけましょう。ワークツリーは以下のようになります。style.scssに作成した「_base.scss」と「_functions.scss」を読み込ませます。以下のように書けば上から順番に読み込んでくれます。分割したsassファイルをフォルダで管理したいときは?分割したSassファイルをフォルダごとで管理することもできます。「base」と「functions」のフォルダを作って試してみましょう。ワークツリーは以下のようになります。style.scssには以下のようにして読み込みます。これでsassファイルをフォルダで分けても読み込んでstyle.scssにまとめて出力することができます。Compiler」の設定方法について説明しました。sassが使えるだけではなく、sassファイルの分割からAutoprefixまでまとめて設定できるのでおすすめです。VScodeのオススメの拡張機能について知りたい方は以下の記事に書いたので参考にしてみてください。