本記事では、SCSSをリアルタイムでコンパイルしてくれるVS Codeの拡張機能ご紹介しています。
Live Sass Compilerの準備
まずはリアルタイムでSCSSをコンパイルしてくれるVS Codeの拡張機能を入れていきます。
まずはVS Codeを開き、左タブにある拡張機能の項目を選択してください。
そして検索項目に【Live Sass Compiler】と入力すると、2つほどでてきます。
ここで、斜線の入っていない方を選びインストールしてください。
斜線の入っている方は古いバージョンのもので、インストールできないようになっています。
Live Sass Compilerの使い方
次は実際に使っていく方法についてご紹介していきます。
まずは上図のように、適当なHTMLファイルとSCSSファイルを作成してください。
SCSSの内容は何でもいいのですが、今回はテストしやすいよう上図のような簡単なものを使用しています。
SCSSファイルの準備ができたら、上図のようにVS Codeの画面左下にある【Watch Sass】という項目をクリックしてください。
これで、リアルタイムにSCSSがコンパイルされていくようになります。
実際にエクスプローラーを見てみると、先ほどまでは無かった【css.mapファイル】と【cssファイル】の2つが出来ていると思います。
これらのファイルはSCSSファイルの名前のものになるため、後々名前を変更する場合はご注意ください。
後は、上図のように自動で作成されたCSSファイルを適用させると完了です。
SCSSの変更を反映させたい場合は、SCSSファイルを保存するだけでできるため、一度CSSファイルの中身は変更されているか確認してみてください。
余談：より使いやすいSCSSの開発環境へ
SCSSをリアルタイムでコンパイルしてくれる便利な拡張機能ですが、そのコンパイルされたCSSの結果もリアルタイムで見られたらより便利になると思います。
そのような時、【Live Server】という拡張機能を組み合わせることをオススメします。
この拡張機能については、下記の記事をご覧ください。
【Live Server】VS CodeでHTMLの結果をリアルタイムで見る方法をご紹介！ - TomoGのごちゃまぜ倉庫
こちら実際に組み合わせて試したところ、無事に動きました！
そのため、VS CodeでSCSSのプログラミングを行いたい方は、【Live Sass Compiler】と【Live Server】を入れてみるといいかもしれません。
参考記事
筆者は上記の記事を参考にして、本拡張機能を使えました。
もし本記事の内容で不明な場合は、上記の記事を参考にしてみてください。
本記事の内容は以上です。
SCSSをセーブするだけでコンパイルしてくれる拡張機能は、かなり便利なので皆さんも是非使ってみて下さい。
本記事は以上です。お疲れさまでした。
