2018 年 3 月 15 日、渋谷のはずれにある中華料理店『東亜飯店』では、 Sass の拡張フレームワークの Compass の送別会がしめやかにとりおこなわれていた。
「えー、それではですね、きょうは長年われわれのチームでいっしょに働いてきた Compass くんがついに卒業ということで、 minne のデザイナーの @shikakun から挨拶があるそうなので、よろしくお願いします」
はい、ありがとうございます。 Compass、いままでほんとうにありがとう。
Compass は、 SCSS を CSS へトランスパイルする機能だけでなく、 CSS3 で追加されたプロパティにベンダープレフィックスを付与してくれる mixin や、指定したディレクトリに画像ファイルを放り込むだけでスプライト画像も生成してくれる、とっても便利なライブラリでした。なんと最初のリリースは 2009 年で、 Compass のおかげで Sass に初めて触れた方も多かったのではないでしょうか。
しかし、時は流れ、ベンダープレフィックスは Autoprefixer が管理してくれるようになり、 HTTP/2 によってひとつの大きなスプライト画像にまとめるメリットがなくなり、 Ruby Sass よりも高速にトランスパイルできる LibSass が誕生し… と、 Compass が提供していた価値がだんだん失われていくなか、ついに 2016 年には今後メンテナンスしないことが宣言されてしまいました。
そして、われわれの手元でスヤスヤと眠っているのは、 Compass に依存したスタイルシートたち。
Compass には感謝しかない。でも、そろそろお別れしなくちゃいけないみたいなんだ。
スプライト画像をやめる
はじめに、スプライト画像をやめます。
スプライト画像をやめるには、スプライトマップを構成していた元の画像ファイルへひとつひとつ置き換えていく… という、考えただけでうんざりするようなまじめなやりかたもありますが、トランスパイルしたあとの CSS を SCSS に上書きしてしまう乱暴な方法もあります。
こんなことをしてしまったらもう変更できなくなってしまいますが、そもそもそんなに変更することもないのではないでしょうか…？ 問題を先送りするようですが、気づいたところのアイコンから SVG 画像へ置き換えていくのは、あとに回してもチームメンバーはきっと許してくれるはずです。
もし、これからもスプライト画像のメンテナンスをつづけたいのなら、 spritesmith などの代替のライブラリを利用できるようにコードを書き換える選択肢もあるでしょう。
mixin をやめる
次に、 Compass が提供している mixin を使うのをやめます。
どこから対応していいのかわからないときは、まずスタイルシートから @import 'compass'; を削除して、エラーで存在しないと怒られた mixin から、内容を調べて取り除いていくストイックな方法があります。
しかし、そこまで本気になれないときは、 Compass が提供している mixin だけを npm パッケージとして配布してくれている compass-mixins に置き換えるという手もあります。
まずは compass-mixins の mixin へそのまま置き換えて、 @include opacity(0.5); や @include border-radius(5px); のような、かんたんな mixin から段階的に取り除いていくのもよいのではないでしょうか。
Compass をやめる
これで、やっと Compass に依存しないスタイルシートになりました。
LibSass は、もともと Ruby で書かれた Sass を C 言語で書き直すことで、高速にトランスパイルできるようにしたライブラリです。もし Node.js のプロジェクトで LibSass を利用したいなら node-sass がありますし、 Rails のプロジェクトなら SassC::Rails で利用できます。
minne では、 compass-rails から SassC::Rails へ置き換えることで約 2 倍の速度でトランスパイルできるようになりました。
この記事では、 Compass をやめる理由と、その手順をご紹介しました。
わたしたちは、これまでいっしょに働いてきたライブラリやコードに敬意を払いながら、これからもきちんとメンテナンスして、ユーザーへ価値を届けつづけたいです。
Compass、お疲れさまでした。