カスタム・プロパティー(とPostCSS)を駆使してSassべったりなCSSを書きなおすという作業にどれくらいの労力が必要か知りたい。やってみるしかなさそうなので、このウェブサイトのCSSを書きなおしていた。
ミックスインやプレースホルダー・セレクターがない状態でもかなり厳しい。\$([a-z][-a-z_]*)をvar(--$1)に置換し、それからcalc()に直していかなければならない。そしてcalc()が通らない(メディア・クエリーのパラメーターなど)では更に数値に直していく。最後にバグへの対応、という順序になる。
とにかくバグを踏む。Edge 15が目立つがChrome 5xやSafari 10.xでもそこそこ踏む(Firefox 5xにはあまりない)。いちいち上げていくとキリがなさそうなくらいは踏むので、まだ製品レベルで導入するには早い、ということはわかった。
行コメントを複数行コメントに直していくのが地味に辛かった。このあたりも踏まえSassの便利なだけ機能は積極的に使わないように書きかえておくという準備は必要だろう。
Sassを脱出してPostCSSに強く依存してもしょうがないので、増やすのは@importをインライン展開するものだけにしておいた。その利用もCSSの仕様範囲内で行う。そうすることで普通のCSSを書き、ツールで最適化する、という安定した状態に戻れる。
Internet Explorer 11以下は@supportsを利用してCSSなしにするようにしてある。SVGが初期サイズで表示されているのを直す必要がありそうだが、それ以外は問題なさそうだ。