- SassをCSSにコンパイル（変換する）簡単な方法を知りたい。
- Rubyとか他のツールを使うのが面倒。。。
- 何か他に簡単なコンパイルの方法はないかな？分かりやすく解説してほしい！
今回の記事では、SassのコードをCSSにコンパイル（変換する）するとっても簡単な方法をご紹介します！
一般的にはSassを使うには環境を構築する必要があり、Rubyをインストールしたり、他にツールを使用したりして、SassからCSSに変換します。
しかし、初心者の方は少し難易度が高く、もっと簡単にSassを使える方法が知りたいでしょう！
- Rubyや他のツールを用いることなく一瞬でSassの環境を作る
- この記事を2分読むだけですぐにSassが使えるようになる
この記事を読むとこのようなメリットが得られます！
結論から言うと、VSCodeに「Live Sass Compiler」と言う拡張機能をインストールするだけです！（※VSCodeを使っている人が対象）
→ 最強エディタVSCodeとは？特徴からインストール、使い方まで解説！
✔︎こんな方にオススメ
- Sassのコンパイル方法（CSSに変換）が分からない方
- 簡単にSassを使う環境を構築したい方
- VSCodeを使っている方
そもそもSassとは？基礎知識
Sass（サス）とは、一言で言うと、、、
「CSSをより効率的早くに書ける言語です！」
つまりSassとCSSは、同じ意図で使われ密接な関係があります。
SassはSyntactically Awesome StyleSheet を略した言葉で、
- Syntactically ＝ 構文的に
- Awesome ＝ 驚くべき
- StyleSheet ＝ スタイルシート
と言う意味になり、具体的に言うと「変数や関数（構文的に）を使うことによって、驚くくらいに早くスタイルシートを作ることができる！」と言う解釈でいいでしょう！
つまりイメージ的には、CSSでは20分かかったスタイリングがSassを使うことにより5分でスタイリングできてしまうと言うことです！
VSCodeでSassのコンパイル環境を構築する方法
この方法を使えば、たったの3分程度でSassをコンパイルする環境が構築できます！
✔︎Sassの環境構築の手順
- VSCodeを開く
- Live Sass Compilerをインストール
- WatchSassをクリック
- Sassをコーディング
- 保存する
- CSSが生成される
やばい！超簡単！！
たったのこれだけで、Sassのコンパイルができてしまいます！
VSCodeを使ってない方はこちらのVSCodeホームページからインストールしましょう！
→ Visual Studio Code – Code Editing. Redefined
VSCodeは僕が超オススメする、機能性抜群のエディタです！
1. Live Sass Compilerをインストール
まず始めにVSCodeを開いて、 Live Sass Compilerの拡張機能をインストールします。
- サイドバーのExtensionsをクリック
- 検索バーにlive sass compilerと検索
- Installをクリック
この作業だけで、あなたのVSCodeにLive Sass Compilerがインストールされました！
2.WatchSassをクリック
インストールが完了したら、実際にmain.sass（main.scss）ファイルを作ってSassをCSSにコンパイルしてみましょう！
まず始めに、好きな名前の.sass（.scss）拡張のファイルを作ります。
先ほど、Live Sass Compilerをインストールしたので、下の青のバーに「Watch Sass」と項目が追加されているので、それをクリックします。
Watch Sassのボタンをクリックして、Sassを記述→保存すると、自動更新してCSSファイルを生成してくれます！
3.Sassをコーディング
実際にSass（Scss）をいつものようにコーディングしていきます。
そして、ファイルを保存すると、自動的にCSSファイルがコンパイルされます。
main.sassをコンパイルすれば、main.cssが作成され、content.scssをコンパイルすれば、content.cssが自動で生成されます！
Sassを編集する場合も、下のバーの「Watch Sass」をクリックし、Sassを記述し保存すれば、CSSに反映されます！
Watch Sass ボタンをクリックしている間は、Sass（Scss）とCSSファイルが連動しているので、全く同じデザイン処理のファイルが2つできるイメージ！
VSCodeでSassのコンパイル環境 まとめ
とっても簡単！面倒な環境構築をボタン一つでできるからとっても便利だね！
いかがでしたでしょうか！
VSCodeは使っている方はもちろん、VSCodeを使っていない方はこの機会に、VSCodeに乗り換えて、Sass（Scss）を使ってみてはいかがでしょうか？
この方法を使うメリットは、画面１つでSassのコンパイルが完結すると言う点です！
ぜひ、この記事を参考にVSCodeでSassのコンパイル環境を構築してみてはいかがでしょうか！
最後までご覧いただきありがとうございました！
