Stylesheet selama satu dekade ditulis untuk pra-prosesor karena CSS tidak dapat disarangkan. Sekarang ia bisa, secara asli, dan browser mem-parsing persis sintaks yang dihasilkan memori otot Sass Anda, dengan satu aturan: penyeleksi turunan di dalam blok bersarang memerlukan ampersand.

.card {
  border: 1px solid oklch(0.9 0 0);

  > header { padding: 0.75rem 1rem; }
  &:hover { border-color: oklch(0.75 0 0); }
  p { margin-block: 0.4rem; }
  &.wide { max-width: 60ch; }
}

Dua aturan yang menjaganya tetap jujur

  1. Gabungkan induk secara eksplisit saat Anda bersungguh-sungguh: ampersand adalah pemilih induk, jadi lebar kartu memerlukan formulir yang ditunjukkan di atas, dan bare .wide akan cocok dengan setiap elemen lebar.
  2. Jaga agar sarang tetap dangkal, paling banyak dua tingkat. Penyusunan dalam adalah kebiasaan praprosesor untuk membangun menara spesifisitas, dan menara spesifisitas selalu menjadi bug.

Memigrasikan praprosesor

  • Output Sass sudah dikompilasi ke CSS datar, jadi jalankan build Anda untuk terakhir kalinya dan diff; lalu ganti sintaksis bersarang dan lihat pengujian berlangsung.
  • Variabel diterjemahkan secara berdekatan: sebagian besar file variabel Sass menjadi properti kustom biasa, yang mengalir dan dapat diganti saat runtime.
  • Langkah build mungkin masih layak disimpan untuk hal lain, tetapi langkah tersebut tidak lagi memiliki stylesheet, yang merupakan penghapusan yang sangat gacor.

Situs ini mengirimkan CSS biasa karena alasan tersebut: lebih sedikit lapisan build antara apa yang Anda tulis dan apa yang dijalankan browser. Bersarang hanya membuat CSS biasa menjadi nyaman pada ukuran di mana setiap proyek sebenarnya berada.