Mengenal SASS dan SCSS: CSS Super yang Memiliki Variabel dan Logika

Batas Kesabaran Menggunakan Vanilla CSS

Saat kamu membuat *file* CSS murni (Vanilla CSS) untuk website sederhana, itu menyenangkan. Tapi saat file CSS-mu sudah mencapai ribuan baris, masalah besar akan muncul: kamu akan mengulang nama *class* yang panjang puluhan kali, dan sangat sulit memecah file CSS menjadi bagian-bagian kecil (modular) secara efisien.

Solusinya adalah menggunakan CSS Preprocessor, dan yang paling populer di dunia adalah SASS (Syntactically Awesome Style Sheets).

Apa itu SASS / SCSS?

SASS adalah versi CSS yang "diberi kekuatan sihir". SASS memberikan fitur-fitur layaknya bahasa pemrograman sungguhan (seperti Variabel, If-Else, Fungsi Matematika, dan Looping) ke dalam penulisan gaya website.

Karena browser Google Chrome atau Safari tidak bisa membaca SASS, kodemu pada akhirnya akan di-compile (diterjemahkan) kembali menjadi CSS murni yang biasa. (Catatan: Penulisan SASS modern saat ini biasanya menggunakan ekstensi file .scss).

Kekuatan Utama 1: Nesting (Bersarang)

Ini adalah alasan terbesar orang pindah ke SCSS. Daripada menulis nama induk berulang kali seperti ini di CSS:

/* CSS Biasa yang Melelahkan */
nav ul {
  margin: 0;
}
nav ul li {
  color: blue;
}
nav ul li:hover {
  color: red;
}

Kamu bisa menuliskannya secara bersarang (Nesting) di SCSS agar kodenya bersih dan jelas struktur hierarkinya:

/* SCSS yang Rapi */
nav {
  ul {
    margin: 0;
    li {
      color: blue;
      &:hover {
        color: red;
      }
    }
  }
}

Kekuatan Utama 2: Partials & Modules (Pecah File)

Di SCSS, kamu bisa membuat file bernama _button.scss khusus untuk mendesain tombol, lalu memanggilnya ke dalam file utama menggunakan perintah @use 'button';. Saat di-compile, mesin akan menggabungkannya menjadi 1 file CSS tunggal yang ringan di-download oleh browser.

Kekuatan Utama 3: Mixins (Fungsi Daur Ulang)

Sering membuat bayangan (box-shadow) atau transisi yang panjang kodenya? Buat saja fungsinya menggunakan @mixin dan panggil di mana pun menggunakan @include tanpa harus mengetik ulang kodenya!

Kesimpulan

Walaupun saat ini CSS murni sudah mulai mendukung fitur Variabel bawaan, SCSS tetap relevan karena kekuatan Nesting dan Mixins-nya sangat mempercepat produktivitas. Framework legendaris seperti Bootstrap pun dibangun sepenuhnya menggunakan sistem SCSS.