Mengenal SASS, Belajar SASS - Sudah tau SASS ? Yap hari ini kita akan belajar dan mengenal SASS sebagai salah satu vendor CSS Pre-processor yang tersedia di pasaran. Artikel ini ditujukan untuk yang sudah paham dengan CSS, bila Anda merasa masih terlalu awam dengan CSS mungkin artikel ini akan membantu Anda memahami CSS.
Pre-processor sendiri merupakan extend dari CSS, dimana ketika kita ngoding CSS kita biasa berkutat dengan bahasa yang sudah harus matang dan tidak boleh ada proses lagi bagi browser untuk memahami nya, ini yang membuat kita tidak bisa menanamkan logic seperti perulangan, peng-kondisian, ataupun pemakaian kembali kode yang ada. Dari sinilah lahir berbagai pre-processor untuk CSS, termasuk SASS itu sendiri.
Jadi dengan SASS kita bisa melakukan banyak hal yang sebelumnya tidak mungkin dilakukan oleh CSS dengan hasil akhir yang sama yakni file dengan ekstensi CSS. Tentunya pre-processor semacam SASS ini sudah menjadi kebutuhan umum bagi project yang lumayan besar, dikerjakan banyak orang, dan memiliki tingkat kompleksitas tinggi terutama di kode CSS nya. Jadi ayo belajar mengenai SASS !
SASS merupakan pre-processor yang dikembangkan diatas Ruby sebagai Engine nya, yang berarti kita juga butuh Ruby untuk menjalankannya atau sekedar ingin belajar dan mencobanya. Syukurlah sekarang ini sudah dikembangkan library untuk porting ke berbagai bahasa termasuk NodeJS yang memang favorit bagi banyak Frontend Developer.
Saya pernah menulis di codepolitan mengenai instalasi minimal untuk SASS di NodeJS menggunakan Gulp sebagai compiler runner nya, Anda bisa baca disini, Saya juga pernah menulis Ebook membuat Framework CSS sendiri yang berisi juga langkah-langkah untuk setup SASS di NodeJS menggunakan Grunt, Anda bisa baca jika belum mengetahui kedua hal tersebut.
SASS memiliki 2 jenis syntax yakni SASS native dan SCSS syntax, Saya sendiri rekomendasi menggunakan SCSS syntax karena lebih mudah untuk dipelajari kita juga hanya akan membahas syntax SCSS di tulisan kali ini.
Variabel
Pertama kita akan bahas mengenai penggunaan variabel dalam SASS, yang memiliki fungsi seperti variabel dalam bahasa pemrograman lain, bisa digunakan berulang dan oleh fungsi-fungsi lain. Variable pada SASS ditandai dengan $ sebagai prefixnya, berikut contoh penggunaan variabel dalam SASS :
Nesting
Seringkali di CSS kita harus berulang-ulang menulis selector yang sama dan di dengan SASS kita tidak perlu melakukannya, contoh saja bila biasanya kita di CSS harus menuliskan :
Maka di SASS kita dipermudah dengan cukup mengetikkan :
Selain itu kita bisa juga menambahkan tanda & yang berarti kita ingin menyertakan parent nya sebagai prefix di output nya nanti, seperti contoh berikut :
Import
Salah satu keunggulan SASS dibandingkan CSS biasa adalah bahwa SASS bisa memecah satu file CSS kedalam beberapa file SASS kecil yang bisa tetap di compile jadi satu file CSS, ini sangat berguna untuk tetap menjaga kode kita mudah dibaca dengan mengurangi line of code dalam satu file. Kita bisa menggunakan fitur @import dari SASS ini. Kita bisa memberi nama file SASS dengan diawali underscore (_) yang berarti file tersebut tidak akan di produksi menjadi file CSS melainkan hanya digunakan sebagai modul yang nantinya akan di import oleh file lain.
Mixin
Sebagai developer seringkali kita tidak ingin mengetik hal yang sama berulang kali, mixin salah satu yang mengakomodir keinginan kita tersebut. Dengan mixin kita seperti membuat satu fungsi yang nantinya akan kita pakai di tempat lain. Berikut adalah contoh mixin yang bisa dilihat di gist dibawah :
Dan berikut adalah gist untuk contoh penggunaan mixin tersebut :
Extend
Seperti pada OOP extend juga digunakan untuk mewarisi apa yang dipunyai oleh parent yang di extend sehingga tidak perlu lagi mengetik hal yang sama. Berikut contoh penggunaan @extend ini :
Operator
SASS bisa melakukan berbagai perhitungan matematis untuk membantu kita, seperti dalam contoh kode berikut dimana saya melakukan perhitungan width class column :
Kondisional
SASS bisa melakukan kondisional berdasarkan variabel yang di assign, contoh sederhananya seperti kode berikut :
Perulangan
Untuk melakukan perulangan SASS bisa menggunakan for maupun while, berikut contoh kode looping menggunakan @for :
Sedangkan contoh menggunakan @while bisa dilihat disini :
SASS bisa juga melakukan perulangan menggunakan @each, yang ini silahkan baca di official website nya ya.
Demikian penjelasan singkat dari saya mengenai SASS sebagai CSS Pre-processor.
Saya juga pernah membuat presentasi mengenai pengenalan SASS ini, silahkan dilihat disini atau disini. Baca juga artikel saya lainnya mengenai CSS, SASS dan hak terkait disini.
Download Ebook Programming disini
Semoga bermanfaat bagi yang baru belajar mengenai SASS ya.
Ditulis oleh Irfan Maulana di jam istirahat kerja.
Salam.