Hallo teman-teman, setelah kemarin saya bahas tentang Pengenalan Sass dan fitur-fiturnya, sekarang saya akan sharing perbandingan antara Sass dan LESS dengan sedikit penjelasan agar teman-teman semua lebih paham.
Sebelum mulai jika teman-teman belum baca tentang Sass boleh buka url ini,
Apa itu Preprocessor CSS?
Sering kali kita menulis CSS dengan berulang2 seperti warna, class yang berbeda, dll. Ini bisa membuat kita para developer jadi lebih banyak memakan waktu. Oleh sebab itu kita butuh Preprocessor CSS yang pada dasarnya adalah bahasa pemrograman yang digunakan untuk membuat bentuk, warna yang nantinya akan di compile menjadi CSS biasa.
Menurut Google Trends, Sass jauh lebih populer dari LESS sampai bulan Desember 2017 ini.
 |
| Google Trends |
Keuntungan Menggunakan Preprocessor
Salah satu keuntungan yang utama adalah kita sebagai developer atau designer bisa menggunakan preprocessor untuk menghindari Pengulangan pada CSS yang akan kita buat.
Dengan Preprocessor, kode kita akan lebih bersih. Contohnya adalah dengan menggunakan variable untuk menyimpan suatu nilai, jadi masalah pengulangan yang kita temui di CSS akan lebih cepat kita selesaikan dengan Preprocessor ini. Dengan Preprocessor, file kita bisa lebih terstruktur karena kita bisa memisahkan antara fungsi satu dengan fungsi lainnya di beberapa file yang berbeda. Selain itu, kita bisa menggunakan Operator Matematika untuk menentukan sebuah nilai yang kita inginkan.
Installasi Sass dan LESS
Untuk memulai menggunakan keduanya, kita bisa menggunakan aplikasi Complier tambahan.
Selain aplikasi diatas, kita juga bisa menggunakan CLI. Berikut Cara Installnya :
- Sass : Pertama kita harus menginstall Ruby untuk Windows / Linux. Kemudian jalanakan sudo gem install sass. Selain menggunakan Ruby, ada juga library lain seperti libSass, yang sekarang membawa Sass ke NodeJS, tanpa membutuhkan Ruby untuk compile.
- LESS : Sebelum install LESS kita harus menginstall NodeJs, karena LESS dasarnya adalah menggunakan javascript, lalu kita hanya perlu menjalankan npm install -g less. Untuk windows, bisa menggunakan npm install less.
Code Editor
Masih banyak Code Editor yang belum support Sass dan LESS. Oleh sebab itu, kita perlu menginstall plugin agar syntax dapat dikenali, sehingga lebih memudahkan kita untuk menulis syntax.
Berikut plugin untuk Sass dan LESS :
Ini dia beberapa perbandingan Sass dan LESS secara mendasar :
Sass :
- Compiler Menggunakan Ruby / libSass
- Sass Menggunakan $ untuk penulisan Variable
- Sass memiliki Compass (cross-browser support)
- Looping berfungsi untuk Semua Data Class
- mempunyai 2 extension yaitu .SASS & .SCSS
- Sass tidak membutuhkan titik koma ';' dan kurung kurawal '{}' untuk penulisan syntax
- SCSS membutuhkan titik koma ';' dan kurung kurawal '{}' seperti CSS tetapi mempunyai fungsi seperti Sass
LESS :
- Compiler Menggunakan NodeJs (Javascript)
- Less Menggunakan @ untuk penulisan variable
- Looping (Hanya untuk Angka)
- 1 extension (.less)
- Less membutuhkan titik koma ';' dan kurung kurawal '{}' seperti CSS
Setelah kita membahas beberapa perbedaan antara Sass dan LESS, dapat disimpulkan bahwa Sass lebih kaya dalam fitur. Oleh karena itu, saya menganjurkan teman-teman semua untuk memilih Sass sebagai preprocessor dalam pengerjaan CSS. Selain lebih kaya fitur, Sass juga lebih populer dari LESS sehingga kita akan lebih mudah untuk belajar dengan adanya banyak sumber yang membahas tentang Sass.
Nah, sekian dulu blog tentang Perbandingan Sass dan Less, semoga dapat membantu teman-teman semua.
GANBATTE!!!
Refrensi :
http://marksheet.io/sass-mixins.html
http://sass-lang.com/
http://lesscss.org/
http://www.keycdn.com/blog/sass-vs-less/
http://marksheet.io/sass-mixins.html
http://sass-lang.com/
http://lesscss.org/
http://www.keycdn.com/blog/sass-vs-less/
No comments:
Post a Comment