Aditya RizkiDalam dunia pemrograman web, CSS (Cascading Style Sheet) dikenal sebagai bahasa pemformatan (styling) untuk HTML. Melalui kode-kode CSS itulah, web programmer bisa membangun sebuah web menjadi tampak lebih berwarna, lebih interaktif, lebih rapi, dan lebih sedap dipandang mata. Bayangkan jika sebuah halaman web hanya berisi kode HTML, pasti hanya akan menghasilkan tampilan yang sangat monoton.
Hal pertama yang dipelajari saat mengenal CSS adalah selector. Selector akan menentukan elemen HTML mana yang akan diformat menggunakan kode-kode CSS. Cara kerja CSS sebetulnya sederhana. Tentukan nama selector, kemudian tambahkan atribut-atribut yang dibutuhkan semisal warna huruf, warna background, menambahkan padding/margin, dan seterusnya. Blok selector tersebut dituliskan di dalam tanda kurung kurawal { … }, sementara masing-masing atribut diakhiri dengan tanda titik koma.
Pada kasus-kasus tertentu, penulisan CSS menjadi tidak efisien. Beberapa selector kadang harus dipanggil berkali-kali, padahal sangat mungkin selector tersebut cukup dipanggil sekali saja. Ini menyebabkan sebuah file CSS bisa mempunyai ukuran file yang lebih besar ketimbang file .html dan .php dalam sebuah project. Di sisi yang lain, developer juga akan kesulitan mencari letak selector yang ingin dimodifikasi, apalagi jika penulisan kode CSS kurang rapi (minim dokumentasi dan tanpa penjelasan).
Seperti halnya framework untuk HTML dan PHP, ide untuk membuat semacam framework CSS akhirnya muncul. Tujuannya untuk memudahkan developer menulis kode CSS dengan lebih singkat, padat, dan jelas. Ide tersebut akhirnya bisa diimplementasikan ke dalam sebuah SASS (syntactically awesome style sheets).
SASS lebih mudah dikenal sebagai preprocessor CSS, ia berupa sebuah program yang bisa mengolah data dengan sintaks-sintaks tertentu, sehingga menghasilkan output berupa kode CSS. Bahasa pemrograman SASS disebut juga sebagai SassScript. Dengan kata lain, SASS adalah program yang bisa menerjemahkan atau mengkompilasi SassScript menjadi CSS.
CSS sendiri sudah distandarisasi dan mulai digunakan pada tahun 1996. Sementara SASS mulai digunakan pada tahun 2006. Konsep SASS ini awalnya didesain oleh Hampton Catlin, programmer asal Amerika yang juga dikenal sebagai pengembang bahasa markup Haml. Selanjutnya, SASS dikembangkan oleh Natalie Weizenbaum dan Chris Eppstein.
Pada mulanya, SASS terdiri dari dua jenis sintaks. Jenis pertama adalah sintaks original yang bentuknya masih mirip dengan Haml. Jenis ini menggunakan sistem indentasi untuk memisahkan blok kode dan karakter ganti baris untuk memisahkan aturan-aturan penulisan sintaks. Jenis pertama ini memiliki ekstensi file .sass.
Jenis kedua adalah versi yang paling termutakhir, biasa disebut sebagai SCSS (Sassy CSS). Jenis kedua ini menggunakan aturan penulisan pemformatan blok seperti halnya pada CSS, yaitu menggunakan kurung kurawal untuk memisahkan blok kode dan titik koma untuk memisahkan atribut dalam satu blok. Jenis kedua ini memiliki ekstensi file .scss.
Saat ini, penggunaan SCSS lebih disukai. SCSS memiliki aturan penulisan yang lebih ramah bagi developer. Selain itu, juga ada lebih banyak fitur yang disediakan SCSS sehingga aktivitas coding CSS menjadi lebih efisien. Developer tak perlu lagi berulang kali menulis kode yang sama seperti saat coding dengan CSS tradisional.
Cara kerja SCSS tentu akan sedikit berbeda dengan CSS. Bagaimanapun juga, file .scss tak akan dikenali oleh browser, browser hanya akan mengenali file berekstensi .css. Untuk menerjemahkan file .scss ke dalam .css diperlukan preprocessor/compiler/program. Ilustrasinya bisa dilihat pada gambar di bawah ini.
Sekarang mari kita lihat perbandingan sintaks antara SASS, SCSS, dan CSS itu sendiri. Masing-masing sintaks berikut menghasilkan output CSS yang sama, yang berbeda adalah cara penulisannya.
Jika dilihat sekilas dari perbandingan di atas, sintaks SCSS memang sangat mirip dengan CSS. Berbeda dengan SASS, yang mana tidak ditemukan kurung kurawal untuk memisahkan blok dan titik koma untuk mengakhiri penulisan atribut.
Dalam sintaks SCSS di atas bisa ditambahkan sebuah variabel yang diawali dengan tanda $ ($primary-color dan $margin). Variabel tersebut bisa digunakan sebagai nilai atribut, yang didalamnya bisa dikombinasikan dengan operator. Sebagai contoh, atribut padding akan berisi nilai $margin / 2, sehingga outputnya akan menjadi 16 / 2 = 8px. Konsep variabel dan operator seperti inilah yang tidak didukung oleh CSS.
Ada beberapa konsep dasar dan fitur lain perlu dipahami saat ingin mendalami SCSS, diantaranya variables, nesting (loops, arguments, in combinations), mixins, imports, extend, selector inheritance, dan sebagainya. Jika dilihat sekilas, fitur-fitur tersebut memang seperti ‘memaksa’ sebuah kode CSS diperlakukan seperti halnya bahasa pemrograman yang mempunyai logika dan operator.
Aditya Rizki
Aditya Rizki