CSS→SCSS変換で重複するメディアクエリを統合する方法

まず押さえること

同じブレークポイントが何度も出てくるのは、CSSの書き方の問題ではなく構造上の宿命です。CSSはルールをネストできないため、コンポーネントごとにファイルを分けるFLOCSSやBEM運用では、.c-cardにも.c-buttonにも同じ@media (min-width: 768px)を書くことになりがちです。既存サイトを引き継いでCSSをSCSSに移行しようとすると、この重複がまとまって目につきます。このツールにはその重複への対応として性質の異なる2つの挙動があります。ひとつは常に効く「安全モード」で、ソース内で隣り合い、かつメディアクエリの条件文字列が完全に一致するものだけを統合します。もうひとつは任意で使う「整理モード」で、対象のメディアブロックがすべてpx単位の単一条件（min-widthのみ、またはmax-widthのみ）である場合に限り並べ替えを行い、そのあとで同じ隣接統合をもう一度適用します。この2つのモードを混同しないことが、結果を正しく読むための前提になります。

実践するときのポイント

進め方は3段階で確認すると迷いません。まず自分のCSSをそのまま「安全優先」モードに貼り付け、隣接する同一クエリだけがどう1つにまとまるかを見ます。次に、扱っているメディアクエリがすべてmin-widthだけ、またはmax-widthだけのpx指定になっているようであれば「ブレークポイント整理」モードに切り替え、並べ替え後にさらに統合されたブロックがないか出力のSCSSを見比べます。最後に、変換レポートに出る3種類のメッセージの意味を押さえておきます。「隣接する同一メディアクエリを◯件統合しました」は安全モードの隣接統合の結果、「単純なmin-widthを昇順、max-widthを降順に整理しました」は整理モードで並べ替えが実行できたことを示し、「複雑または混在したメディアクエリは元の順序を維持しました」は、min/max両方の指定や範囲指定、px以外の単位などが1つでも混じっていたため、そのCSS全体で並べ替えをスキップしたことを示します。

見落としやすい点

統合の判定は文字列の完全一致でのみ動くので、表記ゆれには反応しません。(min-width: 768px)と(min-width:768px)のようにコロンの後のスペース有無が違うだけでも別物として扱われ、統合されません。既存サイトのCSSに複数人が触れてきた履歴がある場合は、この表記ゆれ自体が統合を妨げていないか先に見ておくと安心です。また、整理モードでレポートに表示される統合件数は、並べ替えを行う前の元のソース順で数えた隣接一致の件数を示すものです。並べ替えによって新たに隣り合うことになった同一クエリも変換結果のSCSSには反映されますが、その分の件数が画面上の数字に必ず上乗せされているとは限りません。件数はあくまで作業の目安として受け取り、最終的には出力されたSCSSの@mediaブロックを実際に見比べて、想定どおりにまとまっているかを確認するのが確実です。なお、統合はブロック本文の単純な連結であり、まとめた後に重複するプロパティ宣言を自動で削除するわけではない点も覚えておいてください。

次にやること

まずは自分の手元のCSSを両方のモードに貼り比べてみてください。安全モードでどこまで統合されるかを確認したあと、整理モードで「複雑または混在したメディアクエリは元の順序を維持しました」と表示された場合は、該当のメディアクエリの単位をpxに揃え、min/max混在や範囲指定になっている箇所を単一条件に書き直してから、もう一度貼り直してみましょう。ブレークポイントの数が多いプロジェクトほど、この一手間で整理モードの並べ替えが効くようになります。実際の挙動を試すには、CSS→SCSS 変換ツールを開いて手元のCSSをそのまま貼り付けてみてください。

一度きりで終わらせず、必要な場面で繰り返せる手順として使うのがおすすめです。