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

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

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

参考記事：【Mac】Sassをターミナルから使う方法

拡張機能『Easy Sass』とは

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

導入手順

1.『Easy Sass』をインストールする

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

2.htmlファイルを作成する

3. Scssファイルを作成する

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

4.ファイルを保存し、ブラウザで確認する

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

まとめ

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

最後に

Sassの使い方は書籍で体系的に学んでおくと、業務でも効率が上がるのでオススメです。