【超簡単】VSCodeでSass(.scss)をCSSにコンパイルする方法【Live Sass Compilerプラグイン】

VSCode(Visual studio code)でSassをcssファイルにコンパイル(変換)する方法を解説します。

1つのプラグインのインストールとボタンひとつで可能なので、とても簡単です。

プラグイン「Live Sass Compiler」をインストールする

アクティビティバーを表示させる

VSCodeを開いてメニューの

「表示」→「外観」→「アクティビティバー」をクリック。

拡張機能をクリックして「Live Sass Compiler」で検索をかけます。

検索結果に出てきたら、選択して、インストールしましょう。

Cssにコンパイル後の出力先を設定する

インストールが終わったら、右下の「歯車」→「拡張機の設定」を開きます。

表示された中からどれでも良いので、「settings.jsonで編集」をクリックします。

ファイルが開かれたら、{}の中に以下をコピペしてください！

"liveSassCompile.settings.formats": [{
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/css"
      }],

この”savePath”が出力先になります。

この場合は.scssファイルがあるフォルダのひとつ上の階層にcssというフォルダを作ってそこに.cssにコンパイルされたデータが出力(保存)されます。

ここは自分の好きな場所に設定しましょう！

実際にSassをCssにコンパイルしてみよう

例として「index」というフォルダを作り、その中に「sass」というフォルダを作成します。

sassフォルダの中にstyle.scssを作成して、下のステータスバーにある「Watch Sass」をクリックします。

これで.sassファイルが保存されたら自動的にコンパイルされるようになります。

style.scssに適当にコードを書いて保存すると、Indexフォルダの直下にcssというフォルダができてその中にstyle.cssが出力されます。

これでコンパイルの完了です。

まとめ

VSCode(Visual studio code)でSassをcssファイルにコンパイル(変換)するには

1. Live Sass Compilerのインストール
2. 出力先の設定
3. Watch Sassをオンにして保存

この3つだけで簡単にSassの環境を構築できるのでとてもおすすめです！

効率よくコードを書くために是非トライしてみてください！