Preprocessor CSS Berbanding Sass vs. LESS
Terdapat beberapa CSS Preprocessor, LESS, SASS, Stylus, dan CSS Swith, hanya untuk menamakan beberapa. CSS Preprocessor, seperti yang telah kami katakan sebelum ini, adalah bertujuan untuk menjadikan CSS pengarang lebih dinamik, teratur dan produktif. Tetapi, Persoalannya ialah, yang mana mereka melakukan pekerjaan yang terbaik?
Sudah tentu, kita tidak akan melihat setiap daripada mereka, sebaliknya, kita hanya akan membandingkan dua yang lebih popular: Sass dan kurang. Untuk membuat keputusan, kita akan membandingkan dua dari tujuh faktor: yang melakukan yang lebih baik mendapat satu titik; Sekiranya berlaku seri, kedua-duanya akan diberikan satu mata.
Mari kita mulakan.
Pemasangan
Mari kita mulakan dengan langkah yang sangat asas, Pemasangan. Kedua-dua Sass dan KURANG dibina atas platform yang berbeza, Sass berjalan pada Ruby sementara KURANG adalah perpustakaan JavaScript (yang mana adalah sebenarnya juga dibina di atas Ruby pada mulanya).
Sass: Sass memerlukan Ruby untuk berfungsi, di Mac ini telah dipasang sebelum ini, tetapi di Windows anda mungkin perlu memasangnya sebelum anda boleh mula bermain dengan Sass. Selain itu, Sass perlu dipasang melalui Terminal atau Prompt Perintah. Terdapat beberapa aplikasi GUI yang anda boleh gunakan di tempat tetapi tidak bebas.
TOLAK: KURANG dibina di atas JavaScript, jadi intalling KURANG adalah semudah menghubungkan pustaka JavaScript ke dokumen HTML anda. Terdapat juga beberapa aplikasi GUI untuk membantu dalam menyusun KURANG ke CSS dan kebanyakannya bebas dan melaksanakan dengan baik (mis. WinLess dan LESS.app).
Kesimpulannya: KURANG jelas memimpin.
Pelanjutan
Kedua-dua Sass dan LESS mempunyai sambungan untuk pembangunan web yang lebih cepat dan lebih mudah.
Sass: Di dalam jawatan terakhir kami, kami telah membincangkan mengenai kompas, lanjutan yang berasaskan Sass yang terkini dan popular. Kompas mempunyai beberapa Mixins untuk menulis sintaks CSS3 dalam masa kurang.
Tetapi Compass adalah di luar CSS3 Mixins sahaja, ia telah menambahkan ciri-ciri lain yang sangat berguna seperti Helpers, Layout, Typography, Grid Layout dan bahkan Sprite Images. Ia juga mempunyai config.rb fail di mana kita boleh mengawal output CSS dan beberapa pilihan lain. Jadi, sebaliknya, Compass adalah pakej semua-dalam-satu untuk melakukan pembangunan web dengan Sass.
Kurang: KURANG juga mempunyai beberapa sambungan, tetapi tidak seperti Kompas yang mempunyai semua yang kita perlukan di satu tempat, mereka dipisahkan dan masing-masing dibina oleh pemaju yang berbeza. Ini tidak akan menjadi masalah untuk pengguna berpengalaman tetapi bagi mereka yang baru bermula dengan KURANG, mereka perlu meluangkan sedikit masa untuk memilih sambungan kanan yang sesuai dengan alur kerja mereka.
Berikut adalah beberapa sambungan KURANG yang mungkin perlu anda sertakan dalam projek anda:
- Mix3 CSS3: Elemen kurang, Preboot, kurang campuran.
- Grid: 960.gs, Frameless, Semantic.gs
- Susun atur: Even.less
- Misc: Twitter Bootstrap
Kesimpulannya: Saya fikir kita mesti bersetuju Sass dan Compass adalah pasangan hebat dan ciri imej Sprite benar-benar kickass, jadi satu perkara untuk Sass sini.
Bahasa
Setiap CSS Preprocessor mempunyai bahasa mereka sendiri dan mereka kebanyakannya biasa. Sebagai contoh, kedua-dua Sass dan LESS mempunyai Variabel, tetapi tidak terdapat perbezaan yang signifikan di dalamnya, kecuali Sass mendefinisikan pemboleh ubah dengan $ tandatangan sementara KURANG tidak melakukannya dengan @ tanda. Mereka masih melakukan perkara yang sama: menyimpan nilai malar.
Di bawah ini, kita akan meneliti beberapa bahasa yang paling biasa digunakan dalam Sass dan KURANG (berdasarkan pengalaman saya).
Sarang
Peraturan sarang adalah amalan yang baik untuk mengelakkan penulis memilih berkali-kali dan kedua-dua Sass dan LESS mempunyai fesyen yang sama dalam peraturan bersarang;
Sass / Scss dan KURANG
nav margin: 50px auto 0; lebar: 788px; ketinggian: 45px; ul padding: 0; margin: 0;
Tetapi Sass / Scss mengambil kaedah ini selangkah lebih jauh dengan membenarkan kita untuk sarang sifat individu, contohnya:
nav margin: 50px auto 0; lebar: 788px; ketinggian: 45px; ul padding: 0; margin: 0; sempadan: style: solid; kiri: lebar: 4px; warna: # 333333; kanan: width: 2px; warna: # 000000;
Kod ini akan menghasilkan output berikut.
nav margin: 50px auto 0; lebar: 788px; ketinggian: 45px; gaya sempadan: pepejal; lebar lebar sempadan: 4px; border-left-color: # 333333; sempadan kanan-lebar: 2px; border-right-color: # 000000; nav ul padding: 0; margin: 0;
Kesimpulannya: Ciri-ciri individu sarang adalah tambahan yang baik dan dianggap amalan terbaik, terutamanya jika kita mengikuti prinsip KERING (Jangan Ulangi). Jadi, saya fikir ia jelas yang mana yang lebih baik dalam kes ini.
Mixin dan Pewarisan Pemilih
Campuran dalam Sass dan kurang kurang ditakrifkan sedikit berbeza. Di Sass kita gunakan@mixin arahan sementara dalam KURANG kami mentakrifkannya dengan pemilih kelas. Inilah contohnya:
Sass / Scss
@mixin border-radius ($ nilai) radius sempadan: $ nilai; nav margin: 50px auto 0; lebar: 788px; ketinggian: 45px; @include border-radius (10px);
Kurang
.sempadan (@ radius) radius sempadan: @radius; nav margin: 50px auto 0; lebar: 788px; ketinggian: 45px; .border (10px);
Mixin, di Sass dan kurang, digunakan untuk termasuk sifat daripada satu peraturan kepada satu lagi peraturan. Di Sass, kaedah ini diambil dengan lebih lanjut Pewarisan Pemilih. Konsep itu adalah serupa, tetapi bukannya menyalin keseluruhan sifat, Sass akan melanjutkan atau kumpulan pemilih yang mempunyai sifat dan nilai yang sama menggunakan @extend arahan.
Lihat contoh ini di bawah:
.bulatan border: 1px solid #ccc; jejari sempadan: 50px; limpahan: tersembunyi; .avatar @extend .circle;
Kod ini akan dihasilkan seperti;
.bulatan, .avatar border: 1px solid #ccc; jejari sempadan: 50px; limpahan: tersembunyi;
Kesimpulannya: Sass adalah satu langkah di hadapan oleh Mixins dan Pemilih Pilihan yang berbeza.
Operasi
Kedua-dua Sass dan KURANG boleh melakukan operasi matematik asas, tetapi kadang-kadang mereka kembali hasil yang berbeza. Lihat bagaimana mereka melakukan pengiraan rawak ini:
Sass / Scss
margin $: 10px; div margin: $ margin - 10%; / * Kesalahan sintaks: Unit tidak serasi: '%' dan 'px' * /
Kurang
@margin: 10px; div margin: @margin - 10%; / * = 0px * /
Kesimpulannya: Sass, dalam kes ini, melakukannya dengan lebih tepat; kerana% dan px tidak bersamaan, ia sepatutnya mengembalikan ralat. Walaupun, saya benar-benar berharap ia boleh menjadi seperti 10px - 10% = 9px.
Pemberitahuan Ralat
Pemberitahuan ralat penting untuk melihat apa yang kita lakukan salah. Bayangkan beribu-ribu baris kod dan sedikit kesilapan di suatu tempat di dalam kekacauan. Jelas pemberitahuan ralat akan menjadi cara terbaik untuk mengetahui masalah dengan cepat.
Sass: Dalam contoh ini, saya hanya menggunakan Command Prompt untuk menjalankan pengkompil. Sass akan menjana pemberitahuan ralat apabila ada ketidaksempurnaan dalam kod. Dalam kes ini kita akan mengalih keluar satu titik koma pada baris 6, dan ini harus beralih kepada ralat. Lihatlah tangkapan skrin di bawah.
Apabila saya mula-mula melihat pemberitahuan ini, saya tidak dapat memahaminya. Juga, nampaknya Sass adalah sedikit di luar dengan mana kesilapan itu. Ia mengatakan bahawa kesilapan sedang berlaku baris 7, bukan 6.
Kurang: Dengan senario kesilapan yang sama, pemberitahuan kurang adalah lebih baik dan ia juga kelihatan lebih tepat. Lihatlah tangkapan skrin ini:
Kesimpulan: KURANG memberikan pengalaman yang lebih baik mengenai perkara ini, dan menang tangan ke bawah.
Dokumentasi
Dokumentasi adalah bahagian yang sangat penting untuk setiap produk; walaupun pemaju yang berpengalaman akan merasa sukar untuk melakukan perkara-perkara tanpa Dokumentasi.
Sass: Jika kita melihat dokumentasi di laman rasmi, saya, secara peribadi, berasa seperti saya di tengah-tengah perpustakaan, dokumentasi sangat komprehensif. Walau bagaimanapun, rupa dan rasa, jika perkara itu penting kepada anda, bukanlah motivasi untuk membaca, ditambah pula latar belakang putih biasa.
Penyampaiannya lebih seperti dokumentasi W3 atau WikiPedia. Saya tidak tahu sama ada ini adalah standard memaparkan dokumentasi di Internet, tetapi bukan satu-satunya cara.
Kurang: Di sisi lain, dokumentasi LESS lebih jelas tanpa penjelasan teks yang terlalu banyak, dan ia menyelam terus ke dalam contoh. Ia juga mempunyai tipografi yang baik dan skema warna yang lebih baik. Saya fikir ini adalah mengapa KURANG menarik perhatian saya di tempat pertama dan saya boleh belajar dengan lebih pantas kerana susun atur dan penyampaian dokumentasi.
Kesimpulannya: Penyampaian dokumentasi kurang lebih baik, walaupun Sass mempunyai dokumentasi yang lebih komprehensif, jadi saya fikir kita boleh memanggil yang satu ini.
Pemikiran Akhir
Saya rasa ia adalah satu kesimpulan yang jelas Sass lebih baik dengan skor total 5 berbanding 3 untuk kurang. Bagaimanapun, ini tidak bermakna bahawa KURANG adalah buruk; mereka hanya perlu menjadi lebih baik. Pada akhirnya, ia masih terpulang kepada keputusan pengguna akhir untuk memilih preprocessor pilihan mereka. Sama ada Sass atau KURANG, selagi mereka selesa dan lebih produktif, maka itu adalah pemenang dalam senarai mereka.
Terakhir, jika anda mempunyai sesuatu dalam fikiran mengenai subjek ini, jangan ragu untuk berkongsi di dalam kotak komen di bawah.
