Webのコーディングを行うテキストエディタの中でも、多くの人に使われている人気のエディタがMicrosoftが提供する「Visual Studio Code（VS Code）」です。
他にもAtomやBrackets、Sublime Textなど有名なエディタはいくつかありますが、その中でもVS Codeは初心者でも扱いやすく、拡張機能の追加が簡単なので使いやすいようにするためのカスタマイズが簡単に行えるというメリットがあります。
今回は、VS CodeでSass（Scss）記法を使ってコーディングするための初期設定方法をご紹介していきたいと思います。
INDEX
Visual Studio Codeとは
Visual Studio Code（VS Code）はMicrosoftが提供するプログラミング、コーディング用のテキストエディタです。拡張機能を簡単に追加することができたり、初心者にも扱いやすいという理由で多くの人に使われている人気のツールです。
Sassとは
Sassとは「CSSのメタ言語」と呼ばれるもので、CSSをより便利に記述するための言語です。CSSよりもコードの記述を短く済ませることができ、それによって作業効率の向上と管理しやすいコードを記述することができます。
Web制作会社などでは、CSSをそのまま記述していることはあまりなく、SassやPostCSSを使ってCSSコードを記述している場合がほとんどです。
Sassはとても魅力的ですが、「コンパイル」という処理によってCSSに変換しなければならず、システムにあまり詳しくない人にとってはSassをコンパイルするための環境構築が少し大変です。
しかし、Visual Studio Codeであれば手軽に環境を作ることができるため、初心者の方でも簡単にSassによるWebコーディングを始めることができます。
VS CodeでSassをコンパイルする方法
では、VS CodeでSassを自動でコンパイルするための環境を作る方法をご紹介していきます。とは言っても手順はとても簡単で、下記の2つだけです。
- VS Codeのインストール
- Live Sass Compilerのインストール
1. VS Codeのインストール
PCにVS Codeが入っていない場合は、まずインストールから始めましょう。VS Codeは公式サイトから無料でダウンロードしてインストールすることができます。
Mac、Windowsのどちらも対応しています。下記のページからインストールしてください。
2. Live Sass Compilerのインストール
VS Codeを開くと、下記のような画面が表示されます。
画面の一番左側にアイコンが並んでいますが、一番下のアイコンをクリックすると拡張機能のメニューが表示されます。
検索ボックスがあるので、そこに「Live Sass Compiler」と入力してください。
検索結果の一覧に表示されている「Live Sass Compiler」を選択して、緑色の「Install」ボタンをクリックすれば、拡張機能の追加が完了です。
Live Sass Compilerの使い方
では、Live Sass Compilerを使って実際にコンパイルを行う方法をご紹介していきます。
Sassの監視をオンにする
Live Sass Compilerをインストールすると、画面下の青いバーに「Watch Sass」という項目が追加されます。これをクリックすれば、Sassの監視が開始され、ファイルを保存した時にコンパイルしたCSSファイルが出力されるようになります。
.scss（.sass）形式でファイルを作成して、その中にSassでスタイルを記述し、ファイルを保存すると、下記の画像のようにcssファイルが出力されます。
ファイルの中身もきちんとコンパイルされていることが分かりますね。
ライブプレビューを有効にする
「Live Server」という拡張機能を追加すると、ファイルを保存すると自動でブラウザ上の表示に最新のコードが反映されるようになります。
先程の手順と同様に、拡張機能のメニューから「Live Server」をインストールしてください。
ライブプレビューを始めたい場合は、画面下の「Go Live」というボタンをクリックすると、ローカルサーバーが起動して、ブラウザに作成中のページが表示されます。
普通にファイルを編集していると相対パスを使うことができませんが、Live Serverを使用すると相対パスでCSSファイルやJavaScriptファイルの呼び出しができるようになります。
フォーマット方法やCSSファイルの出力先を変更する
Live Sass Compilerは、初期設定でSassファイルと同じ場所にCSSファイルが出力されるようになっていますが、設定を変更することでCSSファイルを出力するフォルダを自由に変えることができます。
例えば、下記のように設定を追加すると、cssファイルの保存先がルートディレクトリの「css」というフォルダに変更されます。
{
"liveSassCompile.settings.formats": [{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css/"
}]
}詳しくは公式サイトに書かれているので、そちらを参考にして設定を変更してみてください。
