こんにちは、なかにしです。
日頃は普通のCSSを書くことが多いのですが、
FROCSSの復習がしたくて久々にSassでもやってみよっかなーと思ってやってみたら、
めっちゃ便利になっててびっくりしたので記事に残します。
今まであんまり使いたくなかったSass
理由は1つです。
めんどくさいから。
npxでSassをインポートして、いちいち自分でコンパイルしてました。
コンパイル先のフォルダ設定とかめっちゃ面倒でした。
vscodeで簡単にできることを知るまでは…
vscodeだと超簡単
環境構築のやり方を共有します。
①まず「Live Sass Compiler」という拡張機能をインポートします。
![](https://nakanishi-s.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-20-231144-1024x482.png)
②終わりです。
?!
なんだこれ!何が起こってんの???
「Live Sass Compiler」はSassを自動でコンパイルしてくれる拡張機能で、
コンパイル先のフォルダ指定も「settings.json」を一行変更するだけでできます。
今年一の衝撃。
コレ作った人撫で回したいわ。
使ってみる
早速使ってみます。
▽まずはSassのファイルを適当に作って…
![](https://nakanishi-s.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-20-232735.png)
テキトーにSassを書き、vscodeの下のバーにある「Watch Sass」を押します。
![](https://nakanishi-s.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-20-232812-1024x379.png)
▽コンパイルできちゃった…すごすぎ
![](https://nakanishi-s.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-20-232933.png)
次にコンパイル先を指定してみます。
▽拡張機能の右下、歯車を押して「拡張機能の設定」を押します。
![](https://nakanishi-s.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-20-233126.png)
ちょっとスクロールして、「Formats」の「Settings.json」を押します。
![](https://nakanishi-s.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-20-233256.png)
開いたjsonファイルの「savePath」がコンパイル先です。
今回はCSSフォルダ配下にしたいので、「”/css”」にします。
![](https://nakanishi-s.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-20-233513.png)
あとはCSSフォルダを作って「Watch Sass」を押してあげると…
![](https://nakanishi-s.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-20-233636.png)
はい!CSSフォルダ直下にコンパイルしてくれました!
偉いね~!!
おわりに
便利になるって素晴らしい。
これで気兼ねなくSassが使えます。
環境構築も終わったので、次はSassがっつり書いていきます。
FROCSSとBEMについて復習しつつ進めていくので、お楽しみに!
今回はここまで!
Enjoy Hacking!!