Belajar SASS Dasar (Nesting)

Sebelum memahami Nesting, saya sarankan untuk benar2 memahami konsep Variabel dan Tipe Data dulu yaa.

Saat menulis HTML kita akan mendapapati bahwa class/id yang dibuat memiliki visual hierarki yang memudahkan kita dalam meng-eksekusi selektor dengan stylesheet.

Daftar Isi:

• Apa itu SASS dan Cara Menggunakannya
• Variables dan Tipe Data
• Nesting
• Partials and Import
• Mixins and Include
• Inheritance
• Operators

Nesting digunakan untuk membuat CSS Combinators, CSS Pseudo-class ataupun CSS Pseudo-element. Dengan CSS standar, elemen herarki diakses melalui karakter spasi.

Ada sepotong kode HTML:

<div class="container">
   <h1>My First Heading</h1>
   <p>Aku adalah element p yang ada</p>
   <p>didalam section class container.</p>
 
   <div class="box">
      <h1>My Second Heading</h1>
      <p>Dan aku adalah element p yang ada didalam section box</p>
      <p>section box ada didalam container</p>
   </div><!-- End of .box -->
</div><!-- End of .container -->

Untuk mengaskes class h1 dan p pada SASS dapat dilakukan dengan metode nesting:

.container{
   text-align:center;
   h1{
     color:red;
   }
   p{
     font-size:25px
   }
   .box{
      background: #f1f1f1;
      h1{
        color:blue
      }
      p{
        font-size:20px;
        color:green
      }
   }
}

Hasil compile CSS-nya akan seperti ini:

.container {
  text-align: center;
}
.container h1 {
  color: red;
}
.container p {
  font-size: 25px;
}
.container .box {
  background: #f1f1f1;
}
.container .box h1 {
  color: blue;
}
.container .box p {
  font-size: 20px;
  color: green;
}

Idenya sederhana, SASS membuat penulisan selektor ber-level lebih singkat ditulis dan lebih mudah di golongkan.

Kasus lain, jika kita menuliskan kode SASS sepeti ini:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Maka hasil compile-nya seperti ini:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Lebih ringkas dan lebih mudah di maintenance. Coba inget2 lagi, gimana cara kita mendesign bagian navigasi yang memiliki sub-menu, untuk tampilan sederhana saja membutuhkan kode CSS yang panjang dan merepotkan,

Dengan metode nesting, kita bisa membuatnya dengan lebih efisien.

Nesting dengan Multi Selector

Kembali ke pembahasan navigasi pada halaman web. Bagaimana jika kita ingin meng-highlight menu yang sedang diakses.

<ul class="menu">
  <li class="link">Home</li>
  <li class="link active">About</li>
  <li class="link">Service</li>
  <li class="link">Blog</li>
  <li class="link">Contact</li>
</ul>

Membuat highlight text merah pada menu about yang ditandai dengan class active dengan SASS.

.menu{
  list-style: none;
  li.link{
    display: inline-block;
    padding: 0 10px;
    &.active{
      color: red
    }
  }
}

Kita dapat membuat parent-selector dengan symbol &. Maka menghasilkan kode CSS seperti berikut:

.menu {
  list-style: none;
}
.menu li.link {
  display: inline-block;
  padding: 0 10px;
}
.menu li.link.active {
  color: red;
}

Nesting untuk Pseudo-classes

Mirip2 aja sih, ketika kita ingin membuat efek hover pada tag li, begini penulisannya

// SCSS
.link {
  &:hover {
     color:blue
  }
}
// Compile to CSS
.link:hover {
  color: blue;
}

Pewarisan Nama Selector

Teknik ini biasanya digunakan untuk button, ataupun objek class yang memiliki class pengubah.

Kita dapat membuat class pengubah dari class .btn dengan menggunakan metode nesting.

.btn {
  &-primary {
    background-color:blue;
  }
  &-warning {
    background-color:yellow;
  }
}

Pengubah primary dan warning akan mengambil selector pada parent-nya yaitu .btn, maka hasil compilenya seperti ini:

.btn-primary {
  background-color: blue;
}
.btn-warning {
  background-color: yellow;
}

Dengan begitu kita dapat membuat class pengubah menjadi lebih scalable. Ketika kita diharuskan menambah class pengubah maka dapat dilakukan dengan mudah pada SASS.

Kesimpulan

Metode nesting masih sangat luas, silahkan explore lebih jauh, karena masing-masing engineer memiliki kebutuhannya sendiri sesuai lingkup industri dimana mereka bekerja.

Metode nesting diatas sangat sering saya gunakan dan saya fikir pada semua project akan membutuhkan nesting-nesting diatas.

Akhir kata, jika ada pertanyaan atau apapun terkait tulisan ini, feel free untuk kontak saya melalui sosial media, saya sangat terbuka untuk diskusi jika memang saya mampu menjawab pertanyaanya.