VisualStudioCodeの拡張機能『Easy Sass』を導入すると、コマンドラインを使わなくて済むので、お手軽に実行できます。
今回は拡張機能使ったSassの導入方法をまとめました。
Contents
拡張機能『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の使い方は書籍で体系的に学んでおくと、業務でも効率が上がるのでオススメです。
リンク
