Sass, Less, dan Lainnya: Preprocessor CSS Mana Yang Harus Kamu Pilih?

Bekerja dengan front end, sudah pasti kamu tidak bisa menghindari CSS (Cascading Style Sheet) - CSS ini akan menentukan bagaimana masing-masing situs web akan terlihat di browser. Bersama dengan HTML dan JavaScript, CSS diketahui sebagai salah satu dari tiga teknologi utama yang digunakan untuk web. Namun, ada beberapa orang yang menyangkal dan berpendapat bahwa CSS terkesan agak primitif dan sulit untuk dikelola. CSS ini sendiri dirilis di tahun 1996, dan meskipun sudah ada dan masih ada pembaruan yang konstan, sintaks dasarnya tetap tidak banyak berubah. Di sinilah preprocessor CSS yang dipilih dengan baik bisa berguna. 

Pertama, apa itu preprocessor CSS? 

Preprocessor CSS: Ilustrasi kode HTML. Browser internet hanya bisa memahami dan mendengarkan CSS saja, karena hal itulah browser intenet tidak bisa diganti dengan bahasa yang benar-benar baru. Meskipun begitu, hal tersebut memang memiliki batasan tertentu, yang mungkin tidak akan terasa signifikan dalam proyek kecil, tetapi sangat merugikan saat kamu sedang berurusan dengan stylesheet besar. Nah untuk mengakali masalah seperti ini, pengembang pun menggunakan proprocessor CSS. Pada intinya, preprocessor adalah program yang memiliki sintaks uniknya sendiri. Setelah kamu menulis kodemu, mereka akan mengkompilasinya menjadi CSS murni.

Alasan kenapa kami menggunakan CSS preprocessor adalah untuk menambahkan fungsi tambahan yang tidak dimiliki CSS murni. Sebagai contoh, kamu bisa saja memilih selektor nesting atau juga selektor penurunan, sama halnya dengan mixin (bundel deklarasi yang bisa digunakan kembali). Fitur tambahan praktis yang memungkinkanmu menjadi lebih efisien dalam pekerjaan sehari-hari dan memberi kamu skalabilitas ekstra.

Preprocessor CSS mana yang harus kamu gunakan?

Memilih sebuah CSS preprocessor bukanlah suatu hal yang bisa dengan mudahnya dilakukan, seperti kebanyakan teknologi informasi lainnya, kamu akan dihadapkan dengan jenis-jenis CSS preprocessor yang bervariasi, dimana masing-masing pilihan pastinya akan mempunyai manfaat tersendiri dan keuntungan berdasarkan pengguna. Untuk membuat pilihanmu sendiri, kamu harus terlebih dulu mengetahui dan memahami kebutuhanmu, mengenali kelebihan dari masing-masing preprocessor, dan memahami perbedaan setiap preprocessor.

Sass vs. CSS

Diperkenalkan ke khalayak umum pada tahun 2006, Sass (Syntactically Awesome Style Sheets - penamaan yang ciamik dari nama resmi CSS) dianggap sebagai pelopor dari preprosesor CSS. Makanya tidak heran kalau Sass juga menjadi salah satu yang paling populer! Sass sendiri juga turut digunakan dalam Bootstrap 4, yang saat ini menjadi salah satu framework besar di dunia yang digunakan untuk front end dan dengan demikian menjadi pencipta tren terkemuka di dunia TI.

Preprocessor CSS: Logo Sass.Sampai sekarang, Sass ini memiliki dua sintaks yang terpisah: Sass dan SCSS. Meskipun hanya yang pertama yang ada di versi pertama dari preprocessor, tim Sass khawatir bahwa ini mungkin sedikit terlalu berbeda dari CSS yang biasa. Oleh karena itu, mereka kemudian menghadirkan sintaks baru yang disebut dengan SCSS (Sassy CSS) di versi ketiga. Filenya juga dapat memiliki ekstensi baik .sass atau .scss.

Perbedaan utama dari Sass dan SCSS ini adalah bahwa penggunaan titik koma dan tanda kurung dengan cara yang sama seperti yang dilakukan CSS. Sass, di sisi lain, tidak - ditambah, ia menggunakan tanda sama alih-alih menggunakan titik dua untuk tugas. Sementara SCSS sekarang ini secara resmi menjadi sintaks utama dari preprocessor Sass CSS, dan tidak ada rencana untuk menghentikan versi aslinya. Beberapa pengembang mengklaim bahwa hal itu sebenarnya lebih mudah untuk dibaca karena lebih ringkas. Namun, SCSS jauh lebih mudah untuk dipelajari dan diintegrasikan ke CSS. 

Less

Less (Learner Style Sheet) pertama kali muncul ke publik pada tahun 2009. Less sendiri memiliki pengaruh dari Sass, namun tetap memiliki pengaruhnya sendiri pada format SCSS yang kemudian diperkenalkan ke publik. Kenapa? Karena tidak seperti sintaks Sass versi pertama, preprocessor CSS ini awalnya dibuat dengan tujuan agar bisa menjadi semirip mungkin dengan CSS murni. Tidak hanya ini berarti bahwa kurva belajar yang ada lebih lancar, tetapi kamu juga dapat menggunakan kode CSS valid yang telah ditulis sebelumnya di Less. Preprocessor Less ini sendiri ditulis dalam JavaScript, yang juga dapat menyederhanakan pengaturan.

Preprocessor CSS: Logo Less.Membandingkan Less vs. Sass, kita bisa memilihat bahwa Less dan Sass memang memiliki kesamaan dalam fungsi dasar mereka. Masing-masing dari preprocessor CSS ini memungkinkan kamu untuk melakukan nesting, impor, dan menggunakan variabel. Meskipun begitu, dengan menggunakan Less, kamu pun bisa mengangkat variabel dan menambahkan komponen tambahan dari sebuah warna yang tidak kamu bisa lakukan bila menggunakan Sass - yang biasa disebut dengan hue, saturasi, luminositas, dan kecerahan. Di sisi lain, Sass memungkinkan kamu untuk menggunakan pernyataan if dan menginterpolasi mereka di bagian pemilih dan nama properti. Sintaksnya juga berisi operator terner dan nesting kolektor - dan Less, sayangnya, tidak memungkinkan hal tersebut.

Kerugian kecil lainnya dari Less adalah penggunaan simbol @ untuk deklarasi variabel (Sementara Sass sendiri menggunakan tanda $ sebagai gantinya). Meskipun begitu, di CSS, @ juga dapat digunakan untuk bingkai utama dan kueri media. Ini mungkin akan menyebabkan sedikit kebingungan saat membaca kode.

Stylus

Preprocessor CSS lainnya untuk kita ketahui adalah Stylus yang mulai muncul di pasaran pada tahun 2010. Yah meskipun memiliki basis pengguna yang jauh lebih kecil daripada Sass atau Less, namun ada baiknya untuk dilihat. Stylus ditulis dalam Node.js dan oleh karena itu merupakan pilihan yang menarik bagi mereka yang sudah terbiasa dengan platform tersebut. Stylus ini juga memiliki fungsi dan mixin bawaan yang berguna.

Preprocessor CSS: Logo Stylus.Hal pertama dan terpenting yang membuat Stylus berbeda dari proprecessor CSS lainnya adalah karena fleksibilitasnya: titik dua, titik koma, dan koma semuanya adalah opsional. Selain itu, kamu tidak harus memerlukan tanda kurung kurawal untuk menentukan blok kode: alih-alih simbol, Stylus lebih menggunakan lekukan untuk itu. Sedangkan untuk variabelnya sendiri, kamu bisa menggunakan tanda $ seperti di Sass ... Tapi kamu juga bisa melewatkan bagian tersebut. Dan itu bukanlah masalah yang besar.

Semua hal dari Stylus tersebut memungkinkan kamu mengetik dengan lebih sedikit sementara kamu tetap bisa mendapatkan kode yang jelas. Sayangnya, ada beberapa pengembang yang justru melihat fleksibilitas Stylus sebagai suatu kecacatan. Tidak adanya pengenal yang jelas dapat membuat kode yang dihasilkan susah untuk dibaca dan dipahami, terutama jika kode tersebut dipakai untuk proyek yang lebih besar. Jadi bisa dibilang, apa yang kamu akan dapatkan adalah sebuah anarki yang disebabkan oleh kebebasan. Jika kita membandingkan Stylus vs. Sass, yang terakhir jelas memiliki keunggulan dengan kode yang mudah dibaca.

Udacity Review Logo
Pro
  • Desain yang sederhana (tidak ada informasi yang tidak perlu)
  • Kursus-kursus berkualitas tinggi (bahkan untuk kategori yang gratis)
  • Terdapat berbagai fitur khusus
Fitur-Fitur Utama
  • Program Nanodegree
  • Cocok untuk perusahaan/firma
  • Sertifikat kelulusan berbayar
Udemy Logo
Pro
  • Banyaknya pilihan kursus
  • Mudah untuk dinavigasi
  • Tidak ada kendala yang bersifat teknis
Fitur-Fitur Utama
  • Banyaknya variasi kursus
  • Kebijakan pengembalian dana dalam 30 hari
  • Sertifikat kelulusan gratis
Udacity Review Logo
Pro
  • Mudah digunakan
  • Menawarkan konten berkualitas
  • Harga transparan
Fitur-Fitur Utama
  • Gratis sertifikat penyelesaian
  • Fokus pada keahlian data science
  • Waktu belajar yang fleksibel

PostCSS

Preprocessor CSS: Logo PostCSS.Mari kita mulai dengan menegaskan satu hal dengan jelas: PostCSS sebenarnya bukan sebuah preprocessor CSS. Pada awalnya tim PostCSS memang menggunakan istilah tersebut, namun mereka kemudian menyadari kesalahan mereka. PotsCSS ini dapat digunakan sebagai preprocessor, dan juga postprocessor - sebenarnya, semua jenis dari preprocessor yang juga dapat membantu kamu untuk mengoptimalkan, membersihkan kode, dan melakukan berbagai macam tugas lainnya. PostCSS, pada intinya, adalah API yang memiliki banyak sekali plugin JavaScript yang diberdayakan (kamu juga dapat menulis kodemu sendiri). Dengan menggunakannya, kamu dapat memproses CSS dan membuat alat khusus.

PostCSS pertama kali dirilis pada tahun 2013 dan saat ini sudah tersedia sampai versi 7. Kamu bisa menggunakan ini bersama dengan sintaks CSS biasa atau juga preprocessor seperti yang sudah disebutkan di atas. Sedikit perbedaan dari PostCSS dengan Sass, Less, atau preprocessor lainnya adalah modularitasnya. Dimana kamu akan bisa memilih dengan teliti fitur mana yang kamu butuhkan, sehingga akan memiliki performa kerja yang sigap. Tidak heran jika popularitas PostCSS ini semakin meningkat dengan cepat - bahkan sudah ada deklarasi publik yang mungkin akan digunakan dalam versi Bootstrap mendatang.

Apa lagi yang perlu diketahui?

Preprocessor CSS dapat menambahkan langkah kompilasi yang penting, yang bisa memperlambat pengembangan dan debugging. Ukuran file akhir CSS yang dihasilkan pun bisa agak besar.

Meskipun begitu, keuntungan yang didapat jauh melebihi kerugiannya. Variabel, mixin, nesting, serta beberapa fungsi ekstra - semua fitur tersebut dapat membuat penulisan dan pemeliharaan kode menjadi lebih menyenangkan. Pilihlah preprocessor CSS yang paling membuatmu nyaman dan nikmati fungsionalitas CSS yang semakin dikembangkan sekarang!

Berikan feedback Anda pribadi

Berikan opini pribadi Anda & bantu ribuan orang untuk memilih situs belajar online yang terbaik. Semua feedback, baik itu yang positif atau negatif, akan diterima selama Anda bersikap jujur. Kami tidak akan mempublikasikan feedback yang bias atau spam. Jadi, kalau Anda ingin membagikan pengalaman, opini atau bahkan saran pribadi - tempat ini ada untuk Anda!

FAQ

Apa itu preprocessor CSS?

Preprocessor CSS adalah program yang memiliki syntax unik tersendiri. Karena CSS memiliki batasan, yang mungkin tidak terlalu signifikan untuk proyek kecil, pengembang menggunakan preprocessor CSS, yang bisa menambahkan fungsionalitas tambahan kepada bahasa CSS.

Apa perbedaan utama dari Sass dan SCSS?

Perbedaan utama dari Sass dan SCSS adalah bahwa SCSS menggunakan titik koma dan tanda kurung dengan cara yang sama seperti yang dilakukan CSS. Sass, sebaliknya, tidak. Selain itu, SCSS menggunakan tanda sama dengan bukan titik dua untuk tugas. SCSS lebih mudah untuk dipelajari dan diintegrasikan ke dalam CSS.

Bagaimana Anda memilih situs kursus online mana yang patut diulas?

Kami memilih daftar situs belajar online berdasarkan ukuran pasar, popularitas, dan yang paling utama, permintaan pengguna situs kami dan ketertarikan mereka untuk membaca ulasan MOOC mengenai situs-situs belajar online tertentu.

Seberapa banyak riset yang Anda lakukan untuk menulis berbagai ulasan e-learning yang ada?

Tim ahli MOOC kami mendedikasikan waktu selama berminggu-minggu untuk melakukan riset - dengan begitulah mereka bisa yakin bahwa penilaian mereka sudah lengkap. Melalui riset mendalam, kami dapat memastikan semua fitur utama dari situs belajar online telah kami coba dan uji, dan penilaian kami didasarkan pada data yang akurat.

Aspek apa yang paling penting ketika memilih situs belajar online yang terbaik?

Sulit untuk memilih satu aspek utama sebagai jawaban: prioritas orang berbeda-beda tergantung pada preferensi dan harapan mereka. Satu fitur bisa jadi penting buat satu orang tetapi tidak untuk yang lainnya. Tapi, semua pengguna akan setuju bahwa kualitas materi belajar yang baik adalah hal yang wajib ada di setiap situs belajar online.

Apa perbedaan antara platform ulasan e-learning kami dengan platform yang lainnya?

Setiap jenis situs penyedia ulasan MOOC memiliki keunikan masing-masing. Ulasan e-learning kami ditulis secara profesional melalui analisis yang mendalam. Banyak situs ulasan e-learning kurang menyediakan hal tersebut, sehingga inilah keunggulan situs kami!