Kombinator dalam Penulisan Bersarang
Artikel ini menjelaskan tentang penggunaan kombinator dalam penulisan bersarang.
Kami akan menjelaskan cara menggunakan kombinator dalam penulisan bersarang dengan SASS dan memberikan contoh kode untuk membantu Anda memahaminya langkah demi langkah.
YouTube Video
Kombinator dalam Penulisan Bersarang
Dalam SASS, Anda dapat menulis selektor CSS dengan ringkas berdasarkan hubungan induk-anak, tetapi perhatian khusus diperlukan untuk menangani kombinator seperti selektor turunan dan selektor adjacent dengan benar.
Dasar-dasar Penulisan Bersarang
Dalam SASS, dengan menaruh selektor anak di dalam selektor induk, Anda dapat merepresentasikan hubungan induk-anak pada CSS secara jelas dan ringkas.
Contoh: Penulisan Bersarang Dasar
1.nav {
2 ul {
3 li {
4 color: blue;
5 }
6 }
7}
CSS yang Sudah Dikompilasi
1.nav ul li {
2 color: blue;
3}
Referensi Selektor Induk (&
)
Simbol &
pada SASS digunakan untuk mereferensikan selektor induk saat ini.
Menggabungkan Kombinator dan &
Dengan menggunakan &
, Anda dapat membuat selektor yang fleksibel.
Contoh
1.card {
2 & > .title {
3 font-weight: bold;
4 }
5 & + .card {
6 margin-top: 20px;
7 }
8}
CSS yang Sudah Dikompilasi
1.card > .title {
2 font-weight: bold;
3}
4.card + .card {
5 margin-top: 20px;
6}
Notasi singkat untuk &
Di SASS, ketika sebuah kombinator diletakkan di awal selektor, selektor induk secara implisit dimasukkan sehingga Anda bisa menghilangkan penggunaan &
.
Kasus di mana penghilangan dimungkinkan
Sebagai contoh, ketika Anda menulis + .item
, SASS secara internal menafsirkannya sebagai & + .item
dan secara otomatis menghasilkan kombinasi dengan selektor induk.
Contoh
1.item {
2 + .item {
3 margin-top: 10px;
4 }
5 &--hover {
6 background-color: red;
7 }
8}
CSS yang Sudah Dikompilasi
1.item + .item {
2 margin-top: 10px;
3}
4.item--hover {
5 background-color: red;
6}
Gambaran Umum Kombinator
Kombinator CSS mendefinisikan hubungan antara selektor. Berikut adalah jenis-jenis utama kombinator.
-
Selektor Turunan (spasi) Selektor turunan menargetkan semua elemen turunan yang terdapat dalam elemen induk. Contoh:
.parent .child
-
Selektor Anak (
>
) Selektor anak hanya menargetkan elemen anak langsung saja. Contoh:.parent > .child
-
Selektor Sibling Sebaris (
+
) Selektor adjacent menargetkan elemen saudara yang langsung berada setelahnya. Contoh:.sibling1 + .sibling2
-
Selektor Sibling Umum (
~
) Selektor sibling umum menargetkan semua elemen saudara yang mengikuti pada tingkat yang sama. Contoh:.sibling1 ~ .sibling2
Cara Menggunakan Kombinator di SASS
Selektor Turunan (spasi)
Dalam penulisan bersarang SASS, selektor turunan menggunakan spasi diterapkan secara default.
Contoh
1.container {
2 .header {
3 .title {
4 font-size: 20px;
5 }
6 }
7}
CSS yang Sudah Dikompilasi
1.container .header .title {
2 font-size: 20px;
3}
Selektor Anak (>
)
Jika Anda ingin menggunakan selektor anak, tuliskan >
secara eksplisit pada kode SASS Anda.
Contoh
1.container {
2 & > .header {
3 & > .title {
4 font-size: 20px;
5 }
6 }
7}
CSS yang Sudah Dikompilasi
1.container > .header > .title {
2 font-size: 20px;
3}
Selektor Sibling Sebaris (+
)
Untuk menata elemen saudara yang langsung berikutnya, gunakan +
.
Contoh
1.item {
2 & + .item {
3 margin-top: 10px;
4 }
5}
CSS yang Sudah Dikompilasi
1.item + .item {
2 margin-top: 10px;
3}
Selektor Sibling Umum (~
)
Untuk menata semua elemen saudara yang setingkat di bawahnya, gunakan ~
.
Contoh
1.alert {
2 & ~ .alert {
3 border-top: 1px solid red;
4 }
5}
CSS yang Sudah Dikompilasi
1.alert ~ .alert {
2 border-top: 1px solid red;
3}
Pseudo-class dan Pseudo-element dalam Penulisan Bersarang
Pseudo-class dan pseudo-element juga dapat ditulis dengan mudah di SASS.
Contoh
1.button {
2 &:hover {
3 background-color: blue;
4 }
5 &::after {
6 content: '';
7 display: block;
8 }
9}
CSS yang Sudah Dikompilasi
1.button:hover {
2 background-color: blue;
3}
4.button::after {
5 content: '';
6 display: block;
7}
Contoh Praktis
Di bawah ini adalah contoh gaya kompleks yang menggabungkan beberapa kombinator.
Kode SASS
1.menu {
2 .menu-item {
3 & > .submenu {
4 display: none;
5
6 & > .submenu-item {
7 font-size: 14px;
8 }
9 }
10 & + .menu-item {
11 margin-left: 15px;
12 }
13 }
14}
CSS yang Sudah Dikompilasi
1.menu .menu-item > .submenu {
2 display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5 font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8 margin-left: 15px;
9}
Ringkasan
Jika Anda memahami penulisan bersarang dan kombinator dengan benar di SASS, Anda dapat menulis CSS yang lebih ringkas dan mudah dibaca.
Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.