Konverter CSS Nesting

Apa itu CSS nesting

CSS Nesting memungkinkan Anda menulis aturan child dan pseudo-class langsung di dalam blok selector parent, sama seperti yang selalu Sass/SCSS izinkan, tetapi sebagai syntax browser native — tidak ada build step yang diperlukan:

.card {
  color: #1a1a1a;

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

  &:hover {
    background: #f5f5ff;
  }
}

Native CSS Nesting dirilis di semua browser utama pada tahun 2023 (Chrome 112, Firefox 117, Safari 17.2), dan nesting selector & adalah bagian kuncinya — ia mewakili full parent selector di mana pun ia muncul, jadi &:hover menjadi .card:hover dan & .title menjadi .card .title. Dibandingkan dengan Sass/Less, native nesting adalah subset: ia mendukung & dan blok bersarang sederhana (termasuk nested @media/@supports), tetapi bukan fitur Sass-only seperti mixins, functions, atau @extend.

Mengapa meratakan kembali

Sebagian besar tooling, browser lama, beberapa CSS linters, dan CSS-in-JS pipelines masih mengharapkan stylesheets datar, one-selector-per-rule. Tool ini mengambil CSS bersarang dan memperluasnya menjadi aturan datar yang setara — transformasi yang sama yang dilakukan Sass dan PostCSS nesting plugins — jadi Anda mendapatkan output yang bekerja di mana saja, termasuk di lingkungan yang belum mem-parse native nesting.

Cara menggunakannya

1. Tempel CSS bersarang Anda (menggunakan & dan/atau blok bersarang biasa) ke dalam input box.
2. Persamaan CSS datar yang diratakan muncul secara instan di output box — satu selector per aturan, dengan & sepenuhnya disubstitusi dan blok nested-tanpa-& yang digabung dengan descendant space.
3. Copy atau download hasil sebagai file .css.

Converter melacak brace depth melalui nesting arbitrarily deep, mensubstitusi setiap kemunculan & dalam selector, dan secara benar membungkus kembali blok @media/@supports bersarang di sekitar selectors yang dideklarasikan di dalamnya.

Scope

Tool ini mendukung flattening nested CSS menjadi flat CSS only — arah yang well-defined dan tractable (sebaliknya, mengelompokkan unrelated flat rules kembali di bawah shared parent, memerlukan heuristics tentang selector mana yang "termasuk bersama" yang tidak dapat diverifikasi sebagai universally correct, jadi intentionally out of scope). Jika input Anda tidak memiliki nested selectors, output akan terlihat sama seperti input, hanya di-reformat.

FAQ

Apakah ia menangani > .child, + .sibling, dan ~ .sibling combinators? Ya — tulis mereka persis seperti yang Anda lakukan dalam native nesting (> .footer { ... }), dan combinator dipertahankan verbatim dalam selector yang diratakan (.card > .footer).

Apa yang terjadi pada comma-separated selector lists? Setiap nested rule dapat memiliki comma-separated selector list di kedua sisi; tool mengembangkan setiap parent × child combination, matching native nesting semantics.

Apakah ia mendukung nested @media atau @supports? Ya — at-rules nested di dalam rule (atau containing nested rules) dibungkus kembali di sekitar selectors yang diratakan, preserving condition text mereka.

Apakah akan validate CSS saya? Tidak — ini adalah structural transformer, bukan CSS validator. Malformed input (unbalanced braces) di-parse sebagai best-effort; jika parsing gagal sepenuhnya, output menunjukkan short error comment alih-alih throwing.

Privacy

Semua conversion terjadi di browser Anda — CSS Anda tidak pernah diupload atau disimpan di mana pun.