CSS→SCSS変換ツールのネストの仕組みと、変換後に確認すること

まず押さえること

CSSをSCSSへ変換するツールは多くありますが、見た目を整えるためにルールやメディアクエリの順番まで無条件に動かすと、変換後にスタイルの優先順位が変わることがあります。このツールは、変換で動かす範囲を小さく決まったものに絞り、何が動いたかを確認しやすくしています。

実践するときのポイント

初期のネストルールのままでも、欄を空にした標準のBEM判定でも、.c-button__label や .c-button--primary は &__label、&--primary のSCSSネストに変換されます。ネストルールの有無にかかわらず、ルートが同じルールは1つのブロックにまとめます。.c-button と .c-button__label は、あいだに別のルールが挟まっていても、1つの .c-button { … } の中に入ります。同じセレクタの宣言は元の順番のままですが、もともと後ろにあったルールが、関係のない別のセレクタより前に来ることがあります。別々のセレクタで同じ要素にスタイルを当てている場合は、取り込む前に元のCSSと出力を見比べてください。

見落としやすい点

BEMそのままではない命名でも、ネストルールを1行に1つずつ書けば、自分のプロジェクトに合わせたネストにできます。たとえば .*-*&__*&-- と書くと、* が名前、& がネストの区切りになり、.c-card__img--cap は .c-card { &__img { &--cap { … } } } に変換されます。初期ルールの .*-*.&*-* を使えば、.c-card.is-disabled も .c-card { &.is-disabled { … } } になります。:hover や ::before などの疑似クラス・疑似要素は、ルールに書かなくても &:hover のように自動でネストします。.c-box__header, .c-box__time のようなカンマ区切りも、違いが最後の1段だけなら &__header, &__time とまとめます。どのルールにも当てはまらないセレクタは書いたまま残し、件数を変換レポートに表示します。メディアクエリは並べ替えず、隣り合っていて条件が完全に同じものだけをまとめます。

次にやること

一方で、CSS Modules、@layer、複雑な @supports、ネスト済みCSS、SCSS独自構文の完全な理解や、自動でのプロパティ並べ替えは対象外です。万能な整形を目指すより、変換結果をレビューしやすく、意図しない見た目の崩れを減らすことを優先しています。

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