【超簡単】Visual Studio CodeでSass(scss)のコンパイル環境を構築しよう。

こんにちは、浅本（@asa_mo_n）です。

今回のVisual Studio Codeでターミナルやコマンドプロンプトを使用せずにSass(SCSS)のコンパイル環境を構築する方法をご紹介します。

Atomでの環境構築が上手くいかなかったという方もぜひお試しください。こちらの方法ですとWindowsでもmacOSでも簡単に環境構築をすることができます。

導入方法

Step1. Visual Studio Codeをインストール

ダウンロードはこちらから（→ https://code.visualstudio.com/）

Step2. 拡張機能のLive Sass Compilerをインストールする

ダウンロードはこちらから（→https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass）

既にVisual Studio Codeがインストールされていれば、上記ページのインストールボタンをクリックするだけでVisual Studio Code内で拡張機能をインストールする画面が開きます。

Step3. アプリケーション下部に表示されているWatch Sassをクリックする

Watch SassがStop Watchingに切り替われば成功です。

Step4. 拡張子が .scssのファイルを作成し、保存する。

無事にコンパイルされ、.cssのファイルが書き出されると環境構築が完了です。

まとめ

いかがでしたか？

Visual Studio CodeにおけるSassのコンパイル環境の構築は非常に簡単です。

今までSassの便利さは知っていたけれどコンパイル環境の構築が上手くいかずに諦めていたという方はぜひお試しください。