Articles
Pengenalan kepada SASS/SCSS
Gabungan dalam Penempatan Bersarang

Gabungan dalam Penempatan Bersarang

Artikel ini menerangkan mengenai gabungan dalam penempatan bersarang.

Kami akan menerangkan cara menggunakan gabungan dalam penempatan bersarang dengan SASS dan menyediakan contoh kod untuk membantu anda memahaminya langkah demi langkah.

YouTube Video

Gabungan dalam Penempatan Bersarang

Dalam SASS, anda boleh menulis penentu CSS dengan ringkas berdasarkan hubungan induk-anak, tetapi perhatian khusus diperlukan untuk mengendalikan gabungan seperti penentu turunan dan bersebelahan dengan betul.

Asas Penempatan Bersarang

Dalam SASS, dengan meletakkan penentu anak di dalam penentu induk, anda boleh mewakili hubungan induk-anak dalam CSS dengan jelas dan ringkas.

Contoh: Penempatan Bersarang Asas 

1.nav {
2    ul {
3        li {
4            color: blue;
5        }
6    }
7}

CSS yang Telah Disusun 

1.nav ul li {
2    color: blue;
3}

Rujukan Penentu Induk (&)

& dalam SASS digunakan untuk merujuk kepada penentu induk semasa.

Menggabungkan Gabungan dan &

Dengan menggunakan &, anda boleh membina penentu yang fleksibel.

Contoh 
1.card {
2    & > .title {
3        font-weight: bold;
4    }
5    & + .card {
6        margin-top: 20px;
7    }
8}
CSS yang Telah Disusun 
1.card > .title {
2    font-weight: bold;
3}
4.card + .card {
5    margin-top: 20px;
6}

Tanda ringkas untuk &

Dalam SASS, apabila penggabung diletakkan di awal pemilih, pemilih induk akan dimasukkan secara implisit, jadi anda boleh mengabaikan &.

Kes di mana pengguguran adalah mungkin

Sebagai contoh, apabila anda menulis + .item, SASS secara dalaman mentafsirnya sebagai & + .item dan secara automatik menjana gabungan dengan pemilih induk.

Contoh 
1.item {
2    + .item {
3        margin-top: 10px;
4    }
5    &--hover {
6        background-color: red;
7    }
8}
CSS yang Telah Disusun 
1.item + .item {
2  margin-top: 10px;
3}
4.item--hover {
5  background-color: red;
6}

Gambaran Keseluruhan Gabungan

Gabungan CSS mentakrifkan hubungan antara penentu. Berikut adalah jenis utama gabungan.

  1. Penentu Turunan (ruang) Penentu turunan mensasarkan semua elemen turunan yang terkandung dalam elemen induk. Contoh: .parent .child

  2. Penentu Anak (> ) Penentu anak hanya mensasarkan elemen anak secara langsung. Contoh: .parent > .child

  3. Penentu Bersebelahan (+) Penentu bersebelahan mensasarkan elemen adik-beradik yang bersebelahan selepasnya. Contoh: .sibling1 + .sibling2

  4. Penentu Adik-Beradik Umum (~) Penentu adik-beradik umum mensasarkan semua elemen adik-beradik selepasnya. Contoh: .sibling1 ~ .sibling2

Cara Menggunakan Gabungan dalam SASS

Penentu Turunan (ruang)

Dalam penempatan bersarang SASS, penentu turunan dengan ruang digunakan secara lalai.

Contoh 
1.container {
2    .header {
3        .title {
4            font-size: 20px;
5        }
6    }
7}
CSS yang Telah Disusun 
1.container .header .title {
2    font-size: 20px;
3}

Penentu Anak (> )

Jika anda mahu menggunakan penentu anak, tuliskan > secara jelas dalam kod SASS anda.

Contoh 
1.container {
2    & > .header {
3        & > .title {
4            font-size: 20px;
5        }
6    }
7}
CSS yang Telah Disusun 
1.container > .header > .title {
2    font-size: 20px;
3}

Penentu Bersebelahan (+)

Untuk menetapkan gaya pada elemen adik-beradik selepasnya, gunakan +.

Contoh 
1.item {
2    & + .item {
3        margin-top: 10px;
4    }
5}
CSS yang Telah Disusun 
1.item + .item {
2    margin-top: 10px;
3}

Penentu Adik-Beradik Umum (~)

Untuk menetapkan gaya pada semua adik-beradik pada aras yang sama selepasnya, gunakan ~.

Contoh 
1.alert {
2    & ~ .alert {
3        border-top: 1px solid red;
4    }
5}
CSS yang Telah Disusun 
1.alert ~ .alert {
2    border-top: 1px solid red;
3}

Pseudo-Kelas dan Pseudo-Elemen dalam Penempatan Bersarang

Pseudo-kelas dan pseudo-elemen juga boleh ditulis dengan mudah dalam SASS.

Contoh 
1.button {
2    &:hover {
3        background-color: blue;
4    }
5    &::after {
6        content: '';
7        display: block;
8    }
9}
CSS yang Telah Disusun 
1.button:hover {
2    background-color: blue;
3}
4.button::after {
5    content: '';
6    display: block;
7}

Contoh Praktikal

Di bawah ialah contoh gaya yang kompleks dengan gabungan beberapa gabungan.

Kod 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 Telah Disusun 
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 penempatan bersarang dan gabungan dalam SASS dengan betul, anda boleh menulis CSS yang lebih ringkas dan mudah dibaca.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Penetasan dalam SASS