Sassは使っている方も多く、作業効率爆上がり!という話も聞いていましたが、まだまだSassを使うつもりのなかった私。。。
しかし、世界でSassを使っている人の割合が60%というのを知りまして、「そんなに使われてるなら試してみたいなぁ」という気持ちになりました。
どうやらCSSを理解していれば割と入りやすいみたいだったので、やり方がわかるYouTube やブログを拝見してコーディングにチャレンジしました!
勉強方法
まずは「Sassってなんぞや?」というところから入ったわけですが、アキユキさんのこちらの動画がわかりやすかったです!
これを見たらSassがどういうものなのか大体掴むことができます。
次に、ペンギンさんのブログでもっと詳しくSassについて学びました。
一通り読むとネストや変数など基本的な部分がわかるので早速コーディングに入っていけると思います!
コンパイルのツール選びについて
Sassはコンパイルをしなければいけないというのはわかったけれど、DartsSass対応なものがまだまだ限られるそうで、何がいいのかとても悩みました。
というのも私が普段使用しているのがDreameweaver。コンパイルができるのはわかったけれど DartsSassが対応しているのかよくわからず…
VSCodeかPreprosが確実そうということで、悩んだ結果Preprosにしました。
結果、とてもいい感じです!
ファイルと同期して、Dreameweaverで書いたコードを上書き保存すれば勝手にコンパイルしてくれます!
Dreamweaverでなくてもできます。
私はまだ無料の範囲内で十分ですが、買い切りでも4,000円くらいなので購入しても良さそうですね!
ただ、今回調べて思ったのは、VSCodeを使っている方が多い分、解説もVSCordeを使っているものが多いのでVSCordeに移行するのもいいなと思いました。
いざ、コーディング
アキユキさんのブログとペンギンさんのブログをよんで早速本番環境(LP制作)でコーディングに入りました。
始めは一つずつ「これはどうやるんだっけ…」となっていましたが、半ページ終える頃にはネストや変数がわかるようになっていて、結構サクサクできるようになりました。
特に@mixinはメディアクエリの設定でかなり役立つ!を聞いていたのでドキドキしながら使いました。
感想
確かに、Sassは使いこなせばコーディング時間の短縮につながる印象でした。
もともとネストが使えるようになればいいかと考えていましたが、他もいくつか使えたものがあったのでよかったです。
そんな中、たまたまリアルタイムでフロントエンジニアの小林さんがこんなツイートをされてました。
この記事を読むと、初学者が学習時間を確保してまでSassにこだわる必要なない感じがします。
CSSがわかればある程度Sassを使うことができそうです。
また、私は今回ifやforといった構文を使わなかったのですが、それでも十分かもしれません。
ツイートでいろんな方のご意見を見て自分の使いやすい範囲で使っていけばいいような気がしました。
まとめ
会社によっては完全Sassで管理しているところもあるのでしっかり勉強する必要がありますが、がっつり使用しなくてもいい場合はそのままチャレンジでいいと思いました。
また、クラス名を何度も書かなくていいのは意外と負担軽減になりますね。
管理上でもそのCSSがどの部分のものなのかわかりやすい気がします。
一番感動したのはPreprosのコンパイル!起動して同期していれば勝手に行ってくれるのでとてもいいです!エラーがあればそれも出てくるのでどこがまちがっているか解決まで時間がかかりませんでした。
これから自分の必要な範囲で使っていきつつ、レベルアップしたいと感じたら他の構文も入れていきたいと思います。