こんにちは、なかにしです。
日頃は普通のCSSを書くことが多いのですが、
FROCSSの復習がしたくて久々にSassでもやってみよっかなーと思ってやってみたら、
めっちゃ便利になっててびっくりしたので記事に残します。
今まであんまり使いたくなかったSass
理由は1つです。
めんどくさいから。
npxでSassをインポートして、いちいち自分でコンパイルしてました。
コンパイル先のフォルダ設定とかめっちゃ面倒でした。
vscodeで簡単にできることを知るまでは…
vscodeだと超簡単
環境構築のやり方を共有します。
①まず「Live Sass Compiler」という拡張機能をインポートします。

②終わりです。
?!
なんだこれ!何が起こってんの???
「Live Sass Compiler」はSassを自動でコンパイルしてくれる拡張機能で、
コンパイル先のフォルダ指定も「settings.json」を一行変更するだけでできます。
今年一の衝撃。
コレ作った人撫で回したいわ。
使ってみる
早速使ってみます。
▽まずはSassのファイルを適当に作って…

テキトーにSassを書き、vscodeの下のバーにある「Watch Sass」を押します。

▽コンパイルできちゃった…すごすぎ

次にコンパイル先を指定してみます。
▽拡張機能の右下、歯車を押して「拡張機能の設定」を押します。

ちょっとスクロールして、「Formats」の「Settings.json」を押します。

開いたjsonファイルの「savePath」がコンパイル先です。
今回はCSSフォルダ配下にしたいので、「”/css”」にします。

あとはCSSフォルダを作って「Watch Sass」を押してあげると…

はい!CSSフォルダ直下にコンパイルしてくれました!
偉いね~!!
おわりに
便利になるって素晴らしい。
これで気兼ねなくSassが使えます。
環境構築も終わったので、次はSassがっつり書いていきます。
FROCSSとBEMについて復習しつつ進めていくので、お楽しみに!
今回はここまで!
Enjoy Hacking!!