この記事は、2018年4月19日に開催した「#11 Sassを使ってみよう」のレポートです。前回中途半端になっていたのもあり、改めてSassを使ってみようという企画でした。
まずは、過去記事「Sass（SCSS記法）」にある基本的な内容を見つつ、どういうことができるのかを見ていきました。
実践
Sassといえばこの本「Sassの教科書」ではないでしょうか。昨年2017年9月15日に改定2版も発売されたそうですが、わかりやすくまとまっていてサンプルもあるので、勉強しやすいと思います。今回はこちらのサンプルコードを使って実践していきました。
See the Pen 2018.4.19 Sass（SCSS） by kurokoroll (@kurokoro) on CodePen.
次に、変数や関数を使ってスタイルをあててみました。
See the Pen 2018.4.19 変数・関数 by kurokoroll (@kurokoro) on CodePen.
CodePenでは、CSSをSCSS設定にすると、その場でコンパイルされたCSSはみれません。（※見れるそうです。訂正を後に追記しました。）「Change View」の「Direct Code Links」にある「.css」を開くと、コンパイルされたCSSを確認することができます。（恥ずかしながら知らず、参加してた方に教えてもらいました…汗）
追記：高橋としゆきさんから情報いただきました。
ここで切り替えができるそうです。情報ありがとうございます。
実案件では、Gulpを使ってSassをコンパイルしています。導入方法やサンプルコードは、過去記事「#10 Gulpを導入してSassを使ってみよう」をご参考ください。
おわりに
2人から始まったこの勉強会も、今回はわたしを含め7人参加いただきました。少しずつ人が増えてきて嬉しいです。そして、いつも差し入れたくさんありがとうございます！毎度休憩にお菓子祭り状態になるのも、楽しみだったりします。（差し入れ催促してるわけじゃないですよ）
このところ平日開催となっており、来れない方もいると思いますが、細々と続けていけたらと思いますので、タイミング合ったり興味があればぜひ起こしください。