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