ファニプロTech

こんにちは。ファニプロエンジニアの福地です。

今回は、初心者でも簡単にVSCodeでScssを書くために必要な環境構築の方法をご紹介したいと思います。

エンジニアをはじめたばかりの方でも簡単に環境構築ができ、コンパイルも自動で行ってくれるので、今からScssを書こうと思っている方にもおすすめです。

---

Visual Studio Code（VSCode）でScssを書くための環境構築の手順

Visual Studio Code（VSCode）でScssを書くための必要な環境構築の手順は、こちらです。

【手順】
1. Visual Studio Code（VSCode）をインストール
2. 拡張機能「Live Sass Compiler」をインストール
3. 「Live Sass Compiler」の設定

Visual Studio Code（VSCode）

Visual Studio Code（VSCode）は、WindowsやMacの両方に対応しており、初心者でも扱いやすく、便利な拡張機能がたくさんあります。
数あるテキストエディタの中で多くの人が利用している人気のツールです。

---

Live Sass Compiler

VSCode単体では、自動でコンパイルする事はできませんが、拡張機能を利用する事で、保存した時に自動でコンパイルしてくれます。

そんな便利な拡張機能が「Live Sass Compiler」です。

Visual Studio Code（VSCode）をインストール後、エディタを起動します。

左側メニューの一番下のアイコン（赤枠箇所）をクリックし、拡張機能のメニューを開きます。

左上に検索窓があるので、「Live Sass Compiler」を検索します。

検索すると、Live Sass Compilerが検索候補に出てくるので、インストールします。

（※私は既にインストール済みなので、DisableとUninstallが表示されていますが、インストールがまだの場合は、「Install」ボタンが表示されています。）

---

〇〇.scssファイルを作成

自身の環境に「〇〇.scss」ファイルを作成します。（〇〇は、任意の名前でOK）

ファイルを作成したら、Visual Studio Code（VSCode）で開き、コードを書いていきます。

Live Sass Compilerをインストールしただけでは、保存時、自動でコンパイルされませんので注意！

---

Live Sass Compilerの設定

ファイルを保存したタイミングで、自動でコンパイルされるよう設定します。

コンパイルに成功すると、「〇〇.scss」が格納されているディレクト内に変換された「〇〇.css」ファイルと「〇〇.css.map」が出力されます。

それでは、設定していきましょう。

画面下部にある「Watch Sass」をクリックします。

クリック後、「Watching…」と表示が切り替わるので、以後、ファイルを保存したタイミングで自動でコンパイルしてくれるようになります。
設定はこれだけでOKです！
また、コンパイルに成功すると、「Success」と表示されます。

まとめ

初心者でも簡単にできる、Visual Studio Code（VSCode）でScssを書くための環境構築の方法でした。

今回、紹介しておりませんが、「Live Server」と拡張機能を追加すると、ファイルを保存したタイミングでブラウザ上の表示に最新のコードが反映されたり、
初期設定では、scssファイルと同じディレクトリにcssファイルが出力されてしまいますが、出力先を変更する事も可能です。

Visual Studio Code（VSCode）は、少し手を加えることで、自分が使いやすく、効率の良い環境の中で作業をする事ができる便利なツールです。

まだ、Visual Studio Code（VSCode）をインストールしていない方は、導入を検討してみてはいかがでしょうか。

最後まで読んでいただきありがとうございました！

ファニプロでは、アルバイト・正社員・フリーランスを募集しています。
詳しくはWantedlyよりお問い合わせください！

カテゴリー：ファニプロTech

タグ：