CSSネストコンバーター

CSSネスティングとは

CSSネスティングでは、Sass/SCSSが常に許可してきたのと同じように、親セレクタのブロック内に直接子ルールと疑似クラスを記述できますが、ネイティブブラウザ構文として — ビルドステップは不要です:

.card {
  color: #1a1a1a;

  & .title {
    font-size: 20px;
  }

  &:hover {
    background: #f5f5ff;
  }
}

ネイティブCSSネスティングは2023年にすべての主要ブラウザでリリースされました（Chrome 112、Firefox 117、Safari 17.2）。ネスティングセレクタ & が重要な役割を果たします — これは現れる場所に完全な親セレクタを表すため、&:hover は .card:hover になり、& .title は .card .title になります。Sass/Lessと比較して、ネイティブネスティングはサブセットです：& と単純なネストされたブロック（ネストされた @media/@supports を含む）をサポートしていますが、ミキシン、関数、@extend などのSass専用機能はサポートしていません。

なぜ再度フラット化するのか

ほとんどのツール、古いブラウザ、一部のCSSリンター、CSS-in-JSパイプラインは、フラットな1セレクタ1ルール形式のスタイルシートを想定しています。このツールはネストされたCSSを同等のフラットルールに展開します — SassおよびPostCSS nestingプラグインが実行する同じ変換 — したがって、どこでも機能する出力が得られます。これは、ネイティブネスティングをまだ解析していない環境も含みます。

使用方法

1. ネストされたCSS（& または普通のネストされたブロックを使用）を入力ボックスに貼り付けます。
2. フラット化されたプレーンCSSの同等物が出力ボックスに即座に表示されます — 1ルールあたり1セレクタ、& は完全に置換され、ネスト-&-なしブロックは子孫スペースで結合されます。
3. 結果を .css ファイルとしてコピーまたはダウンロードします。

コンバーターは任意の深さのネスティング中に括弧の深さを追跡し、セレクタ内のすべての & 出現を置換し、ネストされた @media/@supports ブロックを正しく、それらの内部で宣言されたセレクタの周りに再ラップします。

対応範囲

このツールは ネストされたCSSをフラットなCSSに展開することのみをサポート — 明確に定義され、扱いやすい方向です（逆に、無関連のフラットルールを共有親の下にグループ化することは、どのセレクタが「一緒に属しているか」についてのヒューリスティックを必要とし、普遍的に正しいものとして検証することはできず、意図的に対象外です）。入力にネストされたセレクタがない場合、出力は入力と同じに見えます。単に再フォーマットされるだけです。

よくある質問

> .child、+ .sibling、~ .sibling コンビネーターを処理しますか？ はい — ネイティブネスティングで行うのと同じように記述します（> .footer { ... }）。コンビネーターはフラット化されたセレクタで逐語的に保持されます（.card > .footer）。

カンマで区切られたセレクタリストはどうなりますか？ ネストされた各ルールは両側にカンマで区切られたセレクタリストを持つことができます。ツールはすべての親 × 子の組み合わせを展開し、ネイティブネスティングセマンティクスと一致させます。

ネストされた @media または @supports をサポートしていますか？ はい — ルール内にネストされた（またはネストされたルールを含む）アットルールは、フラット化されたセレクタの周りに再ラップされ、それらの条件テキストが保持されます。

CSSを検証しますか？ いいえ — これは構造変換ツールで、CSSバリデーターではありません。不正な入力（括弧のバランスが取れていない）はベストエフォートで解析されます。解析が完全に失敗した場合、出力はスローの代わりに短いエラーコメントを表示します。

プライバシー

すべての変換はブラウザで行われます — CSSはアップロードされたり、どこにも保存されたりすることはありません。