Preprosesor CSS Dibandingkan dengan Sass vs. KURANG
Ada sejumlah CSS Preprocessor, KURANG, Sass, Stylus, dan Swith CSS, hanya untuk beberapa nama. Preprosesor CSS, seperti yang telah kami katakan sebelumnya, terutama dimaksudkan untuk membuat CSS authoring lebih dinamis, terorganisir dan produktif. Tapi, pertanyaannya adalah, siapa di antara mereka yang melakukan pekerjaan terbaik?
Ya, tentu saja, kami tidak akan melihat setiap dari mereka, sebagai gantinya, kami hanya akan membandingkan dua yang lebih populer: Sass dan KURANG. Untuk memutuskan, kami akan membandingkan dua dari tujuh faktor: faktor yang berkinerja lebih baik mendapat satu poin; dalam hal seri, keduanya akan diberikan satu poin.
Mari kita mulai.
Instalasi
Mari kita mulai dengan langkah yang sangat mendasar, Instalasi. Baik Sass dan KURANG dibangun di atas platform yang berbeda, Sass berjalan di Ruby sementara KURANG adalah perpustakaan JavaScript (yang itu adalah sebenarnya juga dibangun di atas Ruby pertama).
Kelancangan: Sass membutuhkan Ruby agar dapat berfungsi, di Mac ini sudah diinstal sebelumnya, tetapi di Windows Anda mungkin harus menginstalnya sebelum Anda dapat mulai bermain dengan Sass. Selanjutnya, Sass perlu diinstal melalui Terminal atau Command Prompt. Ada beberapa aplikasi GUI yang dapat Anda gunakan tetapi tidak gratis.
KURANG: KURANG dibangun di atas JavaScript, jadi pengaktifan KUR semudah menghubungkan perpustakaan JavaScript ke dokumen HTML Anda. Ada juga beberapa aplikasi GUI untuk membantu dalam mengkompilasi KURANG ke CSS dan kebanyakan dari mereka gratis dan berkinerja sangat baik (mis. WinLess dan LESS.app).
Kesimpulan: KURANG jelas memimpin.
Ekstensi
Sass dan KURANG memiliki ekstensi untuk pengembangan web yang lebih cepat dan lebih mudah.
Kelancangan: Dalam posting terakhir kami, kami telah membahas tentang Compass, ekstensi berbasis Sass saat ini dan populer. Kompas memiliki sejumlah Mixins untuk menulis sintaksis CSS3 dalam waktu yang lebih singkat.
Tetapi Compass tidak hanya dari CSS3 Mixins, ia telah menambahkan fitur-fitur lain yang sangat berguna seperti Helpers, Layout, Tipography, Grid Layout dan bahkan Sprite Images. Itu juga punya config.rb file di mana kita dapat mengontrol output CSS dan beberapa preferensi lainnya. Jadi, singkatnya, Kompas adalah paket lengkap untuk melakukan pengembangan web dengan Sass.
KURANG: KURANG juga memiliki beberapa ekstensi, tetapi tidak seperti Kompas yang memiliki semua yang kita butuhkan di satu tempat, mereka terpisah dan masing-masing dibangun oleh pengembang yang berbeda. Ini tidak akan menjadi masalah bagi pengguna berpengalaman tetapi bagi mereka yang baru memulai dengan KURANG, mereka perlu meluangkan waktu untuk memilih ekstensi yang tepat yang sesuai dengan alur kerja mereka.
Berikut adalah beberapa ekstensi KURANG yang mungkin perlu Anda sertakan dalam proyek Anda:
- Campuran CSS3: KURANG Elemen, Preboot, Mixins KURANG.
- Kisi: 960.gs, Frameless, Semantic.gs
- Tata letak: Bahkan kurang
- Lain-lain: Twitter Bootstrap
Kesimpulan: Saya pikir kita harus menyetujui Sass dan Compass adalah duo yang hebat dan fitur gambar Sprite benar-benar kickass, jadi satu poin untuk Sass di sini.
Bahasa
Setiap Preprocessor CSS memiliki bahasa mereka sendiri dan kebanyakan adalah umum. Sebagai contoh, baik Sass dan LESS memiliki Variabel, tetapi tidak ada perbedaan yang signifikan di dalamnya, kecuali Sass mendefinisikan variabel dengan a $ masuk sementara KURANG melakukannya dengan @ tanda. Mereka masih melakukan hal yang sama: menyimpan nilai konstan.
Di bawah ini, kami akan memeriksa beberapa bahasa yang paling umum digunakan baik dalam bahasa Sass dan KURANG (berdasarkan pengalaman saya).
Bersarang
Aturan Nesting adalah praktik yang baik untuk menghindari penulisan penyeleksi berulang kali dan Sass dan KURANG memiliki cara yang sama dalam aturan bersarang;
Sass / Scss dan KURANG
nav margin: 50px auto 0; lebar: 788px; tinggi: 45px; ul padding: 0; margin: 0;
Tapi Sass / Scss mengambil metode ini selangkah lebih maju dengan memungkinkan kami untuk juga membuat properti individual, berikut ini sebuah contoh:
nav margin: 50px auto 0; lebar: 788px; tinggi: 45px; ul padding: 0; margin: 0; border: style: solid; kiri: width: 4px; warna: # 333333; kanan: width: 2px; warna: # 000000;
Kode ini akan menghasilkan output berikut.
nav margin: 50px auto 0; lebar: 788px; tinggi: 45px; gaya perbatasan: solid; lebar-kiri-batas: 4px; border-left-color: # 333333; border-right-width: 2px; border-right-color: # 000000; nav ul padding: 0; margin: 0;
Kesimpulan: Bersarang properti individual merupakan tambahan yang bagus dan dipertimbangkan praktek terbaik, terutama jika kita mengikuti prinsip KERING (Jangan Ulangi Diri Sendiri). Jadi, saya pikir jelas mana yang lebih baik dalam hal ini.
Warisan Mixins dan Selector
Mixin dalam Sass dan KUR didefinisikan sedikit berbeda. Di Sass kami menggunakan@mixin direktif sementara dalam KURANG kita mendefinisikannya dengan pemilih kelas. Berikut ini sebuah contoh:
Sass / Scss
@mixin border-radius ($ values) border-radius: $ values; nav margin: 50px auto 0; lebar: 788px; tinggi: 45px; @include border-radius (10px);
KURANG
.border (@radius) border-radius: @radius; nav margin: 50px auto 0; lebar: 788px; tinggi: 45px; .border (10px);
Mixin, dalam Sass dan KURANG, digunakan untuk termasuk properti dari satu set aturan ke set aturan lain. Di Sass, metode ini diambil lebih jauh dengan Warisan Pemilih. Konsepnya identik, tetapi alih-alih menyalin seluruh properti, Sass akan memperluas atau mengelompokkan pemilih yang memiliki properti dan nilai yang sama menggunakan @memperpanjang direktif.
Lihatlah contoh di bawah ini:
.circle border: 1px solid #ccc; batas-radius: 50px; overflow: disembunyikan; . Marcel @extend .circle;
Kode ini akan menghasilkan sebagai;
.lingkaran, .ewati border: 1px solid #ccc; batas-radius: 50px; overflow: disembunyikan;
Kesimpulan: Sass selangkah lebih maju dengan Mixin dan Selector Inheritance yang berbeda.
Operasi
Baik Sass dan KURANG dapat melakukan operasi matematika dasar, tetapi kadang-kadang mereka memberikan hasil yang berbeda. Lihat bagaimana mereka melakukan perhitungan acak ini:
Sass / Scss
$ margin: 10px; div margin: $ margin - 10%; / * Kesalahan sintaksis: Unit tidak kompatibel: '%' dan 'px' * /
KURANG
@margin: 10px; div margin: @margin - 10%; / * = 0px * /
Kesimpulan: Sass, dalam hal ini, melakukannya dengan lebih akurat; karena% dan px tidak sama, ia harus mengembalikan kesalahan. Meskipun, saya benar-benar berharap itu bisa menjadi sesuatu seperti 10px - 10% = 9px.
Pemberitahuan Kesalahan
Pemberitahuan kesalahan penting untuk melihat apa yang kami lakukan salah. Bayangkan ribuan baris kode dan sedikit kesalahan di suatu tempat dalam kekacauan. Jelas pemberitahuan kesalahan akan menjadi cara terbaik untuk mencari tahu masalah dengan cepat.
Kelancangan: Dalam contoh ini, saya hanya menggunakan Command Prompt untuk menjalankan kompiler. Sass akan menghasilkan pemberitahuan kesalahan setiap kali ada ketidakabsahan dalam kode. Dalam hal ini kita akan menghapus satu titik koma pada baris 6, dan ini akan berubah menjadi kesalahan. Lihatlah screenshot di bawah ini.
Ketika saya pertama kali melihat pemberitahuan ini, saya hampir tidak bisa memahaminya. Juga, sepertinya Sass agak tidak aktif dengan letak kesalahannya. Dikatakan bahwa kesalahannya menyala baris 7, bukannya 6.
KURANG: Dengan skenario kesalahan yang sama, pemberitahuan KURANG lebih baik disajikan dan juga tampaknya lebih akurat. Lihatlah screenshot ini:
Kesimpulan: KURANG memberikan pengalaman yang lebih baik dalam hal ini, dan menang dengan mudah.
Dokumentasi
Dokumentasi adalah bagian yang sangat penting untuk setiap produk; bahkan pengembang berpengalaman akan merasa sulit untuk melakukan hal-hal tanpa Dokumentasi.
Kelancangan: Jika kita melihat dokumentasi di situs resmi, saya, secara pribadi, merasa seperti berada di tengah-tengah perpustakaan, dokumentasinya sangat komprehensif. Namun, tampilan dan nuansa, jika itu penting bagi Anda, tidak memotivasi untuk membaca, ditambah latar belakang putih polos.
Presentasinya jauh lebih seperti dokumentasi W3 atau WikiPedia. Saya tidak tahu apakah ini merupakan standar untuk menampilkan dokumentasi di Internet, tetapi ini bukan satu-satunya cara.
KURANG: Di sisi lain, dokumentasi KURANG lebih jelas tanpa terlalu banyak penjelasan teks, dan langsung masuk ke contoh. Ini juga memiliki tipografi yang baik dan skema warna yang lebih baik. Saya pikir ini sebabnya KURANG menarik perhatian saya di tempat pertama dan saya bisa mempelajarinya lebih cepat karena tata letak dan presentasi dari dokumentasi.
Kesimpulan: Presentasi dokumentasi KURANG lebih baik, meskipun Sass memiliki dokumentasi yang lebih komprehensif, jadi saya pikir kita bisa menyebut ini dasi.
Pemikiran Akhir
Saya pikir itu kesimpulan yang jelas Sass lebih baik dengan skor total 5 lawan 3 sedikit. Namun, itu tidak berarti bahwa KURANG itu buruk; mereka hanya perlu lebih baik. Pada akhirnya, masih tergantung pada keputusan pengguna akhir untuk memilih preprosesor pilihan mereka. Baik itu Sass atau KURANG, selama mereka nyaman dan lebih produktif, maka itulah pemenang dalam daftar mereka.
Terakhir, jika Anda memiliki sesuatu dalam pikiran tentang subjek ini, jangan ragu untuk membagikannya di kotak komentar di bawah ini.
