【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」なのに注意。
Sassの記法で下のように書いてみました。

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

ファイル保存をすると、自動的にSassからCSSファイルが生成されます。
htmlファイルからCSSファイルを読み込むと、h1タグの色が赤色になっているのが確認できます。


まとめ

他のエディタでもSassは利用できますが、npmを使って、パッケージのインストールが必要になったりと、多少コマンドを使う手順があります。
コマンドよく分からん!という人は、VisualStudioCodeの拡張機能を使うと、簡単にSassが導入出来ますので、
おすすめです。