【VisualStudioCode】拡張機能『Easy Sass』でSassを使う方法

以前にSassの利用方法についてお伝えしましたが、VisualStudioCodeの拡張機能『Easy Sass』を導入すると、コマンドラインを使わなくて済むので、お手軽に実行できます。
今回は拡張機能を使う方法をまとめました。

以前はSassをターミナルから使う方法を記事にしました。

Table of Contents

拡張機能『Easy Sass』とは

エディタ「VisualStudioCode」の拡張機能を利用すると、コマンドラインを使わずに、Sassを利用出来ます。
個人開発でサクッとSassを利用したいときはこちらの方法がおすすめです。

拡張機能タブから「Easy Sass」と入力。
※インストール後、エディタを再読込したら反映されます。

拡張子は「.scss」なので注意。
Sassの記法で下のように書いてみました。

ファイル保存をすると、自動的にScssファイルからcssファイルが生成されます。
htmlファイルからcssファイルを読み込み、ブラウザで表示すると、h1タグの色が赤色になっているのが確認できます。

拡張機能なしでも、Sassは使えますが、npmパッケージのインストールが必要になったりと、多少コマンドラインの知識が必要になります。
「コマンドよく分からん！」という方は、VisualStudioCodeの拡張機能を使うと、簡単にSassが導入出来ます。