SassをCSSにコンパイル(変換)する環境をVisual Studio Code(VSCode)で作成する

Sass VS Code

Sassでコーディングしたスタイルは、そのままではブラウザーで読み込むことができないので、CSSに変換する必要があります。

Sassを使う場合には、CSSにコンパイル(変換)する環境を構築(用意)する必要があります。

WindowsであればRubyをインストールしたり、PreprosなどのGUIツールが必要になります。

しかし、SassのコーディングにVisual Studio Code(VSCode)を利用しているのであれば、拡張機能を使うことでもっと簡単にSassをCSSにコンパイルすることができます。

今回は、Visual Studio CodeでSassをCSSにコンパイルする環境を作成します。

この記事は、主に以下のような(初心者の)方におすすめです。

  • Sassを使い始めたばかりでコンパイル方法(CSSに変換する方法)が分からない方
  • 面倒な環境構築作業をせずに、簡単にSassを使う環境を構築したい方
  • メインのコーディングツールにVisual Studio Code(VSCode)を使っている方

Visual Studio Code(VSCode)のインストールについては、以下の記事をご覧ください。

Visual Studio Codeのダウンロードとインストール(セットアップ)
Visual Studio Codeは、Microsoft社によって開発されたオープンソースの高機能ソースコードエディタです。 W...

Sassとは

Visual Studio CodeでSassをコンパイルする環境を作成する前に、簡単にSassについて紹介しておきます。

Sassは、CSSを拡張したメタ言語です。
現在では、「CSSプリプロセッサ」という呼び方が一般的かもしれません。

Sassでは、CSSではできなかったコードの書き方ができるようになっており、プログラムのような変数や制御構文、更には関数などを使用することができます。

Sassを使用することでCSSよりも効率的なコーディングが可能になります。
CSSでは1時間以上かかっていたコーディングの時間を、わずか10分程度に抑えることができたりする便利な言語です。

Sassには、「SASS」記法と「SCSS」記法と呼ばれる記述方法がありますが、ここではよりCSSに近い「SCSS」記法を使用します。

Visual Studio Codeの起動

Visual Studio CodeはWindowsのスタートメニューから起動することができます。

Windowsのスタートボタンをクリックしてスタートメニューを表示します。
スタートメニューにある「Visual Studio Code」(フォルダー)を展開すると、「Visual Studio Code」がありますのでクリックします。

Windowsスタートメニュー Visual Studio Code

クリックするとVisual Studio Codeが起動します。

Visual Studio Code

Windowsの検索ボックスからVisual Studio Codeを起動する場合は、検索ボックスに「vsc」と入力すると、最も一致する検索結果に「Visual Studio Code」が表示されます。

Windows 検索ボックス VSCode

Live Sass Compilerのインストール

Sassのコンパイルには「Live Sass Compiler」という拡張機能を使用します。

Visual Studio Codeのウィンドウの左端にある「拡張機能」のボタンをクリックします。

Visual Studio Code 拡張機能ボタン

「拡張機能」ボタンをクリックすると拡張機能を検索する画面が表示されます。

Visual Studio Code 拡張機能画面

画面の左上にある「Marketplace で拡張機能を検索する」と表示されているテキストボックスに「live sass compiler」と入力します。

Visual Studio Code 拡張機能画面のテキストボックスに live sass compilerを入力

「Live Sass Compiler」がリストに表示されますので「インストール」ボタンをクリックします。

Visual Studio Code 拡張機能で Live Sass Compilerをインストール

「インストール」ボタンをクリックするとLive Sass Compilerがインストールされます。

Visual Studio Code 拡張機能で Live Sass Compilerをインストール

SassをCSSにコンパイル(変換)

Live Sass Compilerがインストールできたら、SassをCSSにコンパイルします。

コンパイルするためのSassファイル(拡張子が「.scss」のファイル)を作成します。

Visual Studio Code でSass(SCSS)ファイルを作成

ここでは「C:\Sass」フォルダーに「example.scss」というファイルを作成しました。

ファイルが作成できたらSassをコーディングしていきます。

Visual Studio CodeでSassのコードを入力

ここでは、以下のコードを入力しました。

Visual Studio Codeのタスクバー(画面に下側にあるバー)にある「Watch Sass」をクリックします。

Visual Studio CodeのタスクバーのWatch Sassボタン

「Watch Sass」をクリックすると出力ウィンドウに

と表示されます。

Visual Studio CodeのタスクバーのWatch Sassボタンをクリック後

「Watch Sass」の部分「Watching…」に変化しています。

この状態でSassファイルを保存します。

Visual Studio CodeでSassをコンパイル

保存するとSassファイルがコンパイルされ、CSSファイルが生成されます。

Visual Studio CodeでSassをコンパイルして生成されたCSSファイル
(※ここではエクスプローラーで「C:\Sass」フォルダーを開いています。)

上記のSassコードをコンパイルした結果のCSSは以下のようになっています。

「Watch Sass」をクリックして「Watching…」の状態にしている間は、Sassファイルを編集して保存するとCSSファイルが生成されます。

一度終了してからSassを編集する場合は、再度「Watch Sass」をクリックして「Watching…」状態にしてSassファイルを編集、保存します。

まとめ

本記事では、Visual Studio Code(VSCode)で簡単にSassファイルをCSSファイルにコンパイルする方法について紹介しました。

これまでスタイルのコーディングをVisual Studio Codeで行っていたからはもちろん、これからVisual Studio Codeを使ってSassのコーディングをされる方にとっても、「Live Sass Compiler」はとても便利な拡張機能です。

一度インストールしてしまえば、タスクバーの「Watch Sass」をクリックしてSassを保存するだけでCSSファイルが生成できます。

「SassのCSSコンパイル環境の構築をどうしようかな…?」と考えておられたのであれば、一度試されてみてはいかがでしょうか。