Pengelompokan (Nesting) di SASS
Artikel ini menjelaskan tentang pengelompokan (nesting) di SASS.
Kami akan menjelaskan pengelompokan (nesting) di SASS langkah demi langkah, termasuk contoh kode untuk memperdalam pemahaman Anda.
YouTube Video
Pengelompokan (Nesting) di SASS
SASS adalah bahasa stylesheet yang merupakan pengembangan dari CSS dan menawarkan banyak fitur untuk penataan yang efisien. Di antara fitur-fitur tersebut, pengelompokan (nesting) sangat berguna untuk merepresentasikan struktur hierarki CSS secara visual.
Dasar-dasar Pengelompokan (Nesting)
Di SASS, Anda dapat mengorganisasi kode Anda secara visual dengan menulis selector CSS dalam struktur hierarkis. Sebagai contoh, mari lihat bagaimana Anda dapat menulis ulang kode CSS berikut menggunakan pengelompokan (nesting).
1/* CSS */
2.nav {
3 background-color: #333;
4}
5.nav ul {
6 margin: 0;
7 padding: 0;
8}
9.nav ul li {
10 list-style: none;
11}
12.nav ul li a {
13 color: #fff;
14 text-decoration: none;
15}
Dengan menggunakan SASS, Anda dapat menulis kode ini secara ringkas dengan pengelompokan (nesting) seperti di bawah ini.
1/* SASS */
2.nav {
3 background-color: #333;
4
5 ul {
6 margin: 0;
7 padding: 0;
8
9 li {
10 list-style: none;
11
12 a {
13 color: #fff;
14 text-decoration: none;
15 }
16 }
17 }
18}
- Kode ini menggunakan fitur pengelompokan (nesting) dari SASS untuk menggambarkan gaya menu navigasi secara ringkas dan hierarkis. Dengan menggunakan pengelompokan (nesting), hubungan induk-anak menjadi lebih jelas secara visual dan keterbacaan meningkat.
Mereferensikan Selector Induk (&
)
Ketika Anda perlu mereferensikan selector induk dalam style yang dikelompokkan, gunakan &
. Ini memungkinkan Anda membuat selector dengan status atau modifikasi tertentu.
1.button {
2 background-color: #007bff;
3 color: #fff;
4
5 &:hover {
6 background-color: #0056b3;
7 }
8
9 &:active {
10 background-color: #003f7f;
11 }
12}
- Kode ini menggunakan
&
dalam SCSS untuk mendefinisikan status:hover
dan:active
pada selector induk.button
.
CSS yang Dihasilkan
1.button {
2 background-color: #007bff;
3 color: #fff;
4}
5.button:hover {
6 background-color: #0056b3;
7}
8.button:active {
9 background-color: #003f7f;
10}
Pengelompokan (Nesting) Media Query
Di SASS, Anda juga dapat mengelompokkan (nest) media query. Ini memungkinkan Anda menerapkan desain responsif sambil menjaga relevansi gaya.
1.container {
2 width: 100%;
3
4 @media (min-width: 768px) {
5 width: 750px;
6 }
7
8 @media (min-width: 1024px) {
9 width: 970px;
10 }
11}
- Kode ini mengelompokkan (nest) media query di dalam kelas
.container
sehingga memungkinkan desain responsif yang mengubah lebar sesuai ukuran layar.
CSS yang Dihasilkan
1.container {
2 width: 100%;
3}
4@media (min-width: 768px) {
5 .container {
6 width: 750px;
7 }
8}
9@media (min-width: 1024px) {
10 .container {
11 width: 970px;
12 }
13}
Poin Penting tentang Pengelompokan (Nesting)
Pengelompokan (nesting) yang berlebihan dapat membuat kode Anda bertingkat terlalu dalam dan mengurangi kemudahan pemeliharaan. Anda sebaiknya menghindari pengelompokan (nesting) yang terlalu dalam seperti contoh di bawah ini.
1.header {
2 .nav {
3 ul {
4 li {
5 a {
6 color: red;
7 }
8 }
9 }
10 }
11}
Kode seperti ini terlalu banyak bertingkat, sehingga dapat direfaktor seperti berikut.
1.header .nav ul li a {
2 color: red;
3}
Contoh Praktis: Bilah Navigasi
Berikut adalah contoh penataan bilah navigasi menggunakan pengelompokan (nesting) di SASS.
1.navbar {
2 background-color: #222;
3 color: #fff;
4
5 ul {
6 display: flex;
7 list-style: none;
8 margin: 0;
9 padding: 0;
10
11 li {
12 margin-right: 15px;
13
14 a {
15 color: #fff;
16 text-decoration: none;
17
18 &:hover {
19 text-decoration: underline;
20 }
21 }
22 }
23 }
24}
- Kode ini mengatur dan mendefinisikan gaya untuk daftar dan tautan di dalam bilah navigasi, termasuk efek hover, menggunakan pengelompokan (nesting) di SASS.
CSS yang Dihasilkan
1.navbar {
2 background-color: #222;
3 color: #fff;
4}
5.navbar ul {
6 display: flex;
7 list-style: none;
8 margin: 0;
9 padding: 0;
10}
11.navbar ul li {
12 margin-right: 15px;
13}
14.navbar ul li a {
15 color: #fff;
16 text-decoration: none;
17}
18.navbar ul li a:hover {
19 text-decoration: underline;
20}
Ringkasan
Fitur pengelompokan (nesting) di SASS adalah alat yang kuat untuk menggambarkan struktur hierarki CSS secara ringkas dan meningkatkan keterbacaan. Namun, penting untuk menghindari pengelompokan (nesting) yang berlebihan dan mengatur kode Anda dengan baik.
Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.