と考えている人に向けて、今回は「VSCodeでSassをコンパイルする方法」について紹介します！
この記事を書いている僕は、現在大阪のWEB制作会社で働いており、実際の業務でも頻繁にSassをコンパイルします。
当ブログを読むことで、あなたは「VSCodeでSassをコンパイルする方法」を理解することができる！
僕自身も独学をしていたときに、Sassがコンパイル出来なくて、1日中分からなかった経験があります。
VSCodeでSassをコンパイルする方法はいくつかありますが、今回は一番簡単な方法に絞って紹介していきますね！
VSCodeとは？
VSCodeとは、「Visual Studio Code」の略で、マイクロソフト社が開発したプログラミング・コーディングができるソースコードエディタです。
エディタは世界中にたくさんありますが、その中でもVSCodeは世界で32.8%のシェアをほこっています。
さらにVSCodeは使用する際の動作が軽かったり、プラグイン機能も豊富に揃っているので、使い勝手がかなり良い！
これからプログラミングを始めたい人は、明確な理由がなければ、エディタはVSCodeの一択ですね！
Sassとは？
「Sass」とは、「Syntactically（文法的に） Awesome（イケてる・すごい） StyleSheet（スタイルシート）」の略。
Sassはハンプトン・キャトリン氏が設計し、ネイサン・バイゼンバウム氏が開発した、CSSのメタ言語になります。
メタ言語とは、ある言語についてなんらかの記述をするための言語で、特定のルールを加えて具体的な応用を可能にするものです。
引用：CSSの代わりに、Sassを使って、コードのメンテナンス性を高めよう！
つまりSassとは、「CSSを拡張して、さらに効率的にコーディングできるようにした」ものですよ！
【簡単】VSCodeでSassをコンパイルする方法を紹介！
これからは、実際に「VSCodeでSassをコンパイルする方法」について紹介します！
VSCodeでSassをコンパイルする方法は、以下の3ステップです。
① VSCodeをインストールする
② 「Live Sass Compile」をインストールする
③ コンパイルする
手順通りやれば簡単なので、是非参考にしてください！
① VSCodeをインストールする
まずは「VSCode」をインストールしましょう！
VSCodeは公式サイトから、無料でインストールすることが出来ます！
MacとWindowsのどちらにも対応しているので安心してくださいね。
② 「Live Sass Compile」をインストールする
VSCodeがインストール出来たら、次は「Live Sass Compiler」という拡張機能をインストールしていきましょう！
「Live Sass Compiler」とは、SassのファイルをCSSファイルへと簡単にコンパイルができる拡張機能のことです。
インストールするために、まずは左のメニューバーの拡張機能ボタンをクリック！
そして左上の検索バーで「Live Sass Compiler」と検索してください。
「Live Sass Compiler」と検索すると、以下の画像のような画面になるので、「Install」のボタンをクリック！
これで拡張機能のインストールは完了です！
簡単ですよね！
③ コンパイルする
最後に、実際にSassをコンパイルしていきましょう！
まずは、以下のファイルを用意してください。
「VSCode」というファイルの中に、以下のファイルを入れました。
・image（画像を入れるファイル）
・Sass（Sassを入れるファイル）
そして「VSCode」という名前のファイルを、VSCodeのエディタに「ドラックアンドドロップ」してください。
すると、以下の画像のようになります。
これでファイルがエディタに表示されました。
そして、Sassファイルの中に、「main.scss」ファイルを作成し、右下の「Watch Sass」ボタンをクリックしてください！
「Live Sass Compiler」をインストールしていると出てくるはずです。
すると、「Watch Sass」ボタンが「「Watching…」の表記に変わり、CSSファイルの中に新たに「main.css」と「main.css.map」のファイルが自動生成されます！
これでコンパイルは完了です！
実際にコンパイルされているのか、確かめてみよう！
せっかくなので、試しに「header」というファイルを作って、本当にコンパイルされているのか試してみますね！
まずは、Sassファイルの中に、「_header.scss」ファイルを作成してください。
そして、main.scssファイルを開いて、読み込みたいSassファイルをインポートしていきます！
インポートすることで、今回は「_header.scss」ファイルが読み込まれます。
そして「index.html」ファイルを作成。
次にheadタグの中で、「main.css」ファイルを読み込んでください！
分からない人は、以下の画像を参考にしてくださいね。
そして、今の画像のようにHTMLをコーディングします。
「_header.scss」ファイルで、headerの中にある文字を、赤色に変えるコードを試しに書いてみます。
すると、以下の画像のように、headerの中にある文字色が赤になりました！
これでしっかりSassがコンパイルされていることが確認出来ました！
まとめ
以上が、「VSCodeでSassをコンパイルする方法」でした！
VSCodeでSassをコンパイルする方法はいくつかありますが、今回の方法が一番簡単です。
是非試してみてください！
