Perbedaan Antara CSS Asli dan Sass Nesting

Sejak diluncurkan, CSS dengan tegas menolak mendukung sintaksis untuk penyeleksi bersarang. Alternatifnya selalu menggunakan praprosesor CSS seperti Sass. Namun saat ini, pembuatan sarang secara resmi menjadi bagian dari CSS asli. Anda dapat mencoba fitur ini langsung di browser modern.

Jika Anda bermigrasi dari Sass, Anda harus mempertimbangkan perbedaan antara sarang asli dan sarang Sass. Ada beberapa perbedaan utama antara kedua fitur bersarang, dan menyadarinya sangat penting jika Anda ingin beralih.

Anda Perlu Menggunakan "&" Dengan Pemilih Elemen di CSS Asli

CSS Nesting masih berupa rancangan spesifikasi, dengan berbagai dukungan browser. Pastikan untuk memeriksa situs seperti caniuse.com untuk informasi terkini.

Berikut ini contoh tipe sarang yang akan Anda lihat di Sass, menggunakan sintaks SCSS:

.nav {
ul { display: flex; }
a { color: black; }
}

Blok CSS ini menetapkan bahwa setiap daftar tidak berurutan di dalam elemen dengan a navigasi kelas sejajar sebagai kolom fleksibel, salah satu caranya meletakkan elemen HTML pada halaman. Selain itu, semua teks tautan jangkar di dalam elemen dengan a navigasi kelas harus berwarna hitam.

Sekarang, dalam CSS asli, penyarangan seperti itu tidak valid. Untuk membuatnya berfungsi, Anda harus menyertakan simbol ampersand (&) di depan elemen yang disarangkan, seperti:

.nav {
 & ul { display: flex; }
 & a { color: black; }
}

Versi awal dari penyarangan CSS tidak memperbolehkan penyarangan pemilih tipe. Perubahan terkini berarti Anda tidak lagi harus menggunakan "&", namun versi Chrome dan Safari yang lebih lama mungkin belum mendukung sintaksis yang diperbarui ini.

Sekarang jika Anda menggunakan pemilih yang dimulai dengan simbol (misalnya pemilih kelas) ke menargetkan bagian halaman tertentu, Anda dapat menghilangkan ampersand. Jadi sintaks berikut akan berfungsi di CSS asli dan Sass:

.nav {
.nav-list { display: flex; }
.nav-link { color: black; }
}

Anda Tidak Dapat Membuat Selector Baru Menggunakan "&" di CSS Asli

Salah satu fitur yang mungkin Anda sukai dari Sass adalah kemampuannya untuk melakukan sesuatu seperti ini:

.nav {
 &-list { display: flex; }
 &-link { color: black; }
}

Kode Sass ini dikompilasi ke CSS mentah berikut:

.nav-list {
display: flex;
}
.nav-link {
color: black;
}

Di CSS asli, Anda tidak dapat membuat pemilih baru menggunakan "&". Kompiler Sass menggantikan "&" dengan elemen induk (mis. .nav), tetapi CSS asli akan memperlakukan "&" dan bagian setelahnya sebagai dua pemilih terpisah. Akibatnya, ia akan mencoba membuat pemilih gabungan, yang tidak akan memberikan hasil yang sama.

Contoh ini akan berfungsi di CSS asli:

.nav {
 &.nav-list { display: flex; }
 &.nav-link { color: black; }
}

Ini berfungsi karena pemilih pertama sama dengan nav.nav-daftar dalam CSS biasa, dan yang kedua sama dengan nav.nav-link. Menambahkan spasi antara "&" dan pemilih sama dengan menulis nav .nav-daftar.

Di CSS asli, jika Anda menggunakan ampersand seperti ini:

.nav {
 &__nav-list { display: flex; }
 &__nav-link { color: black; }
}

Sama halnya dengan menulis ini:

__nav-list.nav {
display: flex;
}
__nav-link.nav {
color: black;
}

Ini mungkin mengejutkan Anda, mengingat keduanya __nav-daftar Dan __nav-link berada di dalam .nav pemilih. Namun ampersand sebenarnya menempatkan elemen bersarang di depan elemen induk.

Kekhususannya Bisa Berbeda

Hal lain yang perlu diperhatikan adalah dampak pada kekhususan yang tidak terjadi di Sass tetapi terjadi di sarang CSS asli.

Jadi katakanlah Anda memiliki dan sebuah elemen. Dengan CSS berikut, an di salah satu elemen berikut akan menggunakan font serif:

#main, article {
h2 {
font-family: serif;
 }
}

Versi kompilasi kode Sass di atas adalah sebagai berikut:

#mainh2,
articleh2 {
font-family: serif;
}

Namun sintaksis bersarang yang sama di CSS asli akan menghasilkan hasil yang berbeda, secara efektif sama seperti:

:is(#main, article) h2 {
font-family: serif;
}

Itu adalah() pemilih menangani aturan kekhususan sedikit berbeda dari sarang Sass. Pada dasarnya kekhususan :adalah() mendapat peningkatan otomatis ke item paling spesifik dalam daftar argumen yang disediakan.

Urutan Elemen Mungkin Mengubah Elemen yang Dipilih

Bersarang di CSS asli dapat sepenuhnya mengubah arti sebenarnya dari pemilih (yaitu memilih elemen yang sama sekali berbeda).

Perhatikan HTML berikut, misalnya:

<divclass="dark-theme">
 <divclass="call-to-action">
 <divclass="heading"> Hellodiv>
div>
div>

Dan CSS berikut:

body { font-size: 5rem; }
.call-to-action.heading {
.dark-theme & {
padding: 0.25rem;
background: hsl(42, 72%, 61%);
color: #111;
 }
}

Inilah hasilnya jika Anda menggunakan Sass sebagai compiler CSSnya:

Sekarang di blok HTML, jika Anda ingin memindahkan dengan kelas tema gelap di dalam itu panggilan untuk bertindak, itu akan merusak pemilih (dalam mode Sass). Namun saat Anda beralih ke CSS biasa (yaitu tanpa praprosesor CSS), gaya tersebut akan terus berfungsi.

Hal ini disebabkan oleh cara tersebut :adalah() bekerja di bawah tenda. Jadi CSS bersarang di atas dikompilasi menjadi CSS biasa berikut:

.dark-theme:is(.call-to-action.heading) {
/* CSS code */
}

Ini menentukan a .menuju itu adalah keturunan keduanya .tema gelap Dan .panggilan untuk bertindak. Namun urutannya tidak terlalu penting. Selama .menuju adalah keturunan dari .panggilan untuk bertindak Dan .tema gelap, ini berfungsi dalam urutan apa pun.

Ini adalah kasus yang sulit dan bukan sesuatu yang akan sering Anda temui. Tapi memahaminya :adalah() Fungsi dasar pemilih dapat membantu Anda menguasai cara kerja bersarang di CSS. Ini juga membuat men-debug CSS Anda jauh lebih mudah.

Pelajari Cara Menggunakan Sass di React

Karena Sass dikompilasi ke CSS, Anda dapat menggunakannya dengan hampir semua kerangka UI. Anda dapat menginstal praprosesor CSS di proyek Vue, Preact, Svelte, dan—tentu saja—React. Proses pengaturan Sass untuk semua kerangka kerja ini juga cukup mudah.

Keuntungan terbesar menggunakan Sass di React adalah memungkinkan Anda menulis gaya yang bersih dan dapat digunakan kembali menggunakan variabel dan mixin. Sebagai pengembang React, mengetahui cara menggunakan Sass akan membantu Anda menulis kode yang lebih bersih, efisien, dan menjadikan Anda pengembang yang lebih baik secara keseluruhan.