取り組んだほうが良いと分かってはいたけど、やってなかった CSS プリプロセッサ。Bootstrap 4 のソースコードを読んでいて、SCSS が導入されていたので、これを機に SCSS 使ってみることにしました。感想...、早く取り組んでいれば良かった、、、

SCSS について調べてみると、Compass というフレームワークと組み合わせて使うと便利らしい…ということで SCSS x Compass で環境を作りました。使用するエディタは Sublime Text です。

環境構築は、解説されているページが幾らでもあるので詳細はここでは省略。箇条書きで簡単に書いておくと

• Ruby インストール
• gem install で sass, compass をインストール
• Sublime で SCSS, Compass Package をインストール

あとは 初期設定ファイル（config.rb）を作成し、 Sublime で ビルドシステムを Compass にて、style.scss に対して Ctrl + Bでビルドすると、style.css が生成される、そんな感じです。

環境ができたので、実際に当サイトを SCSS で書き直してみました。感想としては、

• 定数が定義・参照できる
• 書くコード量が減り、見通しが良くなる
• ベンダープレフィックスを自動で生成してくれる...など

特に効いたのが、カラーコード。それぞれベタ書きだったのが定数化・参照できるようになったので、これで容易に色を一律変更できるようになりました。DOM 構造と同期させて書くのも苦ではなくなり、見通しも良いですね。追記か追加で徐々にカオスになっていく傾向の強い CSS でしたが、これである程度品質を維持できそうです。

デメリットは、環境構築に手間がかかるくらいでしょうか。環境作ってしまえば、あとは利用しない手はないかと思います。

以上です。
私的にはメリットしかなかったのでもっと早く使っておけば...と。CSS プリプロセッサ（SCSS）ぜひお勧めします。

参考

• Sass Official Site
• Compass Official Site