Advertisement
  1. Code
  2. HTML & CSS

Sass vs. LESS vs. Stylus: Preprocessor Shootout

by
Read Time:14 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Fodal Fadul (you can also view the original English article)

Menghasilkan kekuatan sebenarnya dari preprocessor CSS adalah sebuah petualangan. Ada banyak bahasa, sintaks, dan fitur, semua siap digunakan sekarang.

Dalam artikel ini, kita akan membahas berbagai fitur dan manfaat menggunakan tiga preprocessor yang berbeda - Sass, LESS, dan Stylus.


Pengenalan

Preprocessor menghasilkan CSS yang berfungsi di semua browser.

CSS3 preprocessor adalah bahasa yang ditulis untuk tujuan semata-mata menambahkan fitur inventif yang keren ke CSS tanpa merusak kompatibilitas browser. Mereka melakukan ini dengan menyusun kode yang kita tulis ke CSS biasa yang dapat digunakan di browser apa pun sepanjang perjalanan kembali ke zaman batu. Ada ribuan fitur yang dibawa oleh preprocessors, dan dalam artikel ini kita akan membahas beberapa yang dipublikasikan, dan beberapa yang tidak dipublikasikan. Mari kita mulai.


Sintaks

Bagian terpenting dari penulisan kode dalam preprocessor CSS adalah memahami sintaks. Untungnya bagi kami, sintaksnya (atau bisa juga) identik dengan CSS biasa untuk ketiga preprocessor.

Sass & LESS

Sass dan LESS keduanya menggunakan sintaks CSS standar. Ini membuatnya sangat mudah untuk mengonversi file CSS yang ada ke preprocessor. Sass menggunakan ekstensi file .scss dan LESS menggunakan ekstensi .less. File Sass atau LESS dasar dapat diatur seperti di bawah ini:

Seperti yang Anda ketahui, ini hanya CSS biasa, yang dikompilasi dengan sempurna di Sass dan LESS.

Penting untuk dicatat bahwa Sass juga memiliki sintaks yang lebih tua, yang menghilangkan tanda titik koma dan kurung kurawal. Meskipun ini masih ada, sudah tua dan kami tidak akan menggunakannya melewati contoh ini. Sintaksnya menggunakan ekstensi file .sass dan terlihat seperti ini:

Stylus

Sintaks untuk Stylus jauh lebih banyak lagi. Menggunakan ekstensi file .styl, Stylus menerima sintaks CSS standar, tetapi juga menerima beberapa variasi lain di mana tanda kurung, titik dua, dan titik dua adalah opsional. Sebagai contoh:

Menggunakan variasi yang berbeda dalam stylesheet yang sama juga valid, jadi berikut ini akan dikompilasi tanpa kesalahan.


Variabel

Variabel dapat dideklarasikan dan digunakan di seluruh stylesheet. Mereka dapat memiliki nilai apa pun yang merupakan nilai CSS (misalnya warna, angka [satuan termasuk], atau teks.), Dan dapat dirujuk di mana saja di seluruh stylesheet kami.

Sass

Variabel Sass ditambahkan dengan simbol $ dan nilai dan nama dipisahkan dengan titik koma, seperti halnya properti CSS.

LESS

Variabel LESS persis sama dengan variabel Sass, kecuali nama variabel yang ditambahkan dengan simbol @.

Stylus

Variabel-variabel stylus tidak memerlukan apa-apa untuk ditambahkan ke mereka, meskipun itu memungkinkan simbol $. Seperti biasa, titik koma akhir tidak diperlukan, tetapi tanda sama di antara nilai dan variabel. Satu hal yang perlu diperhatikan adalah Stylus (0.22.4) mengkompilasi jika kita menambahkan simbol @ ke nama variabel, tetapi tidak akan menerapkan nilai ketika direferensikan. Dengan kata lain, jangan lakukan itu.

CSS yang dikompilasi

Setiap file di atas akan dikompilasi ke CSS yang sama. Anda dapat menggunakan imajinasi Anda untuk melihat bagaimana variabel yang berguna dapat. Kami tidak perlu lagi mengubah satu warna dan harus mengetik ulang dua puluh kali, atau ingin mengubah lebar situs kami dan harus menggali sekitar untuk menemukannya. Berikut ini CSS setelah kompilasi:


Bersarang

Jika kita perlu mereferensikan beberapa elemen dengan induk yang sama dalam CSS kita, itu bisa membosankan untuk terus menulis induk berulang-ulang.

Sebagai gantinya, dengan menggunakan preprocessor, kita dapat menulis selektor anak-anak di dalam tanda kurung orang tua. Juga, simbol & referensi pemilih induk.

Sass, LESS, & Stylus

Ketiga preprocessors memiliki sintaks yang sama untuk pemilih yang bersarang.

CSS yang dikompilasi

Ini adalah CSS yang dikompilasi dari kode di atas. Ini persis sama seperti ketika kita mulai — betapa nyamannya!


Mixin

Mixins adalah fungsi yang memungkinkan penggunaan kembali properti di seluruh stylesheet kami. Daripada harus pergi ke seluruh stylesheet dan mengubah properti beberapa kali, sekarang kita dapat mengubahnya di dalam mixin kami. Ini dapat benar-benar berguna untuk styling khusus dari elemen dan awalan vendor. Ketika mixin dipanggil dari dalam pemilih CSS, argumen mixin dikenali dan gaya di dalam mixin diterapkan ke pemilih.

Sass

LESS

Stylus

CSS yang dikompilasi

Semua preprocessors dikompilasi ke kode yang sama di bawah ini:


Pewarisan

Saat menulis CSS dengan cara lama, kita bisa menggunakan kode berikut untuk menerapkan gaya yang sama ke beberapa elemen sekaligus:

Ini berfungsi dengan baik, tetapi jika kita perlu untuk lebih lanjut menata elemen secara individual, pemilih lain harus dibuat untuk masing-masing dan itu dapat dengan cepat menjadi lebih berantakan dan lebih sulit untuk dipertahankan. Untuk mengatasi ini, pewarisan dapat digunakan. Warisan adalah kemampuan untuk pemilih CSS lainnya untuk mewarisi sifat pemilih lain.

Sass & Stylus

CSS yang dikompilasi (Sass & Stylus)

LESS

LESS tidak benar-benar mendukung gaya mewarisi seperti Sass dan Stylus. Alih-alih menambahkan beberapa pemilih ke satu set properti, ia memperlakukan warisan seperti mixin tanpa argumen dan mengimpor gaya ke pemilih mereka sendiri. Kelemahan untuk ini adalah bahwa properti diulang dalam stylesheet dikompilasi Anda. Beginilah cara Anda menyiapkannya:

CSS yang dikompilasi (LESS)

Seperti yang Anda lihat, gaya dari .block dimasukkan ke pemilih yang ingin kami beri warisan. Penting untuk dicatat bahwa prioritas dapat menjadi masalah di sini, jadi berhati-hatilah.


Pengimporan

Dalam komunitas CSS, mengimpor CSS disukai karena memerlukan beberapa permintaan HTTP. Namun, mengimpor dengan preprocessor bekerja secara berbeda. Jika Anda mengimpor file dari salah satu dari tiga preprocessors, itu benar-benar akan memasukkan impor selama kompilasi, hanya menciptakan satu file. Harap diingat bahwa mengimpor file .css biasa dikompilasi dengan file @import "file.css" default; Kode. Juga, mixin dan variabel dapat diimpor dan digunakan dalam stylesheet utama Anda. Impor membuat pembuatan file terpisah untuk organisasi sangat bermanfaat.

Sass, LESS, & Stylus

CSS yang dikompilasi


Fungsi Warna

Fungsi warna dibangun dalam fungsi yang akan mengubah warna pada kompilasi. Ini bisa sangat berguna untuk membuat gradien, warna warna yang lebih gelap, dan banyak lagi.

Sass

Ini hanya daftar pendek dari fungsi warna yang tersedia di Sass, daftar lengkap fungsi warna Sass yang tersedia dapat ditemukan dengan membaca Dokumentasi Sass.

Fungsi warna dapat digunakan di mana saja bahwa warna adalah CSS yang valid. Inilah contohnya:

LESS

Daftar semua fungsi LESS dapat ditemukan dengan membaca Dokumentasi LESS.

Berikut ini contoh cara menggunakan fungsi warna dalam LESS:

Stylus

Daftar lengkap semua fungsi warna Stylus dapat ditemukan dengan membaca Dokumentasi Stylus.

Berikut ini contoh menggunakan fungsi warna Stylus:


Operasi

Melakukan matematika dalam CSS cukup bermanfaat, dan sekarang sepenuhnya mungkin. Ini sederhana dan ini adalah bagaimana melakukannya:

Sass, LESS, & Stylus


Aplikasi praktis

Kami telah membahas banyak fitur dan hal-hal baru yang dapat dilakukan oleh preprosesor, tetapi kami belum membahas apa pun secara langsung atau praktis. Berikut adalah daftar singkat aplikasi dunia nyata di mana menggunakan preprocessor adalah penyelamat kehidupan.

Vendor Prefiks

Ini adalah salah satu alasan yang dikaburkan untuk menggunakan preprocessor dan untuk alasan yang sangat baik — menghemat banyak waktu dan air mata. Membuat mixin untuk menangani awalan vendor mudah dan menghemat banyak pengulangan dan penyuntingan yang menyakitkan. Inilah cara melakukannya:

Sass

LESS

Stylus

CSS yang dikompilasi

Teks 3D

Memalsukan teks 3D menggunakan banyak text-shadows adalah ide yang cerdas. Satu-satunya masalah adalah mengubah warna setelah fakta itu sulit dan tidak praktis. Menggunakan fungsi mixins dan warna, kita dapat membuat teks 3D dan mengubah warna dengan cepat!

Sass

LESS

Stylus

Saya memilih untuk menulis stylus text-shadows pada satu baris karena saya menghilangkan tanda kurung kurawal.

CSS yang dikompilasi

Hasil akhir

Kolom

Menggunakan operasi angka dan variabel untuk kolom adalah ide yang saya temukan ketika saya pertama kali bermain dengan CSS preprocessors. Dengan menyatakan lebar yang diinginkan dalam variabel, kita dapat dengan mudah mengubahnya di jalan tanpa matematika mental. Begini caranya:

Sass

LESS

Stylus

CSS yang dikompilasi


Kebiasaan Penting

Ada beberapa permainan kata-kata untuk menggunakan preprocessor CSS. Saya akan membahas beberapa yang menyenangkan, tetapi jika Anda benar-benar tertarik untuk menemukan mereka semua, saya sarankan Anda menjelajahi dokumentasi atau, lebih baik lagi, mulailah menggunakan preprocessor dalam koding harian Anda.

Pelaporan Kesalahan

Jika Anda telah menulis CSS untuk jumlah waktu yang layak, saya yakin Anda telah mencapai titik di mana Anda mengalami kesalahan di suatu tempat dan tidak dapat menemukannya. Jika Anda seperti saya, Anda mungkin menghabiskan sore hari menarik rambut Anda dan mengomentari berbagai hal untuk memburu kesalahan.

Kesalahan laporan prapemrosesan CSS. Hanya sesederhana itu. Jika ada yang salah dengan kode Anda, ini memberi tahu Anda di mana, dan jika Anda beruntung: mengapa. Anda dapat melihat posting blog ini jika Anda tertarik untuk melihat bagaimana kesalahan dilaporkan dalam preprocessors yang berbeda.

Komentar

Saat meng-compile dengan preprocessor CSS, komentar double-slash akan dihapus (mis. // comment) dan komentar slash-asterisk tetap ada (mis. / * Komentar * /). Dikatakan demikian, gunakan double-slash untuk komentar yang Anda inginkan pada sisi non-dikompilasi dan slash-asterisk untuk komentar yang Anda inginkan terlihat setelah kompilasi.

Sekadar catatan: jika Anda mengkompilasi ulang, semua komentar akan dihapus.


Kesimpulan

Setiap pra-prosesor CSS yang kami bahas (Sass, LESS, dan Stylus) memiliki cara uniknya sendiri untuk menyelesaikan tugas yang sama — memberikan kemampuan kepada pengembang untuk menggunakan fitur yang berguna dan tidak didukung sekaligus menjaga kompatibilitas browser dan kebersihan kode.

Meskipun bukan merupakan persyaratan untuk pengembangan, preprosesor dapat menghemat banyak waktu dan memiliki beberapa fitur yang sangat berguna.

Saya mendorong Anda semua untuk mencoba sebanyak mungkin preprocessors sehingga Anda dapat secara efektif memilih favorit dan tahu mengapa itu disukai atas banyak orang lain. Jika Anda belum mencoba menggunakan preprocessor untuk menulis CSS Anda, saya sangat menyarankan Anda mencobanya.

Apakah Anda memiliki fitur preprocessor CSS favorit yang tidak saya sebutkan? Adakah sesuatu yang bisa dilakukan orang lain? Beri tahu kami di komentar di bawah ini!

Terima kasih khusus kepada Karissa Smith, teman saya yang sangat berbakat yang membuat thumbnail pratinjau untuk artikel ini.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.