Sass Vs LESS Manakah yang lebih baik?

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,

http://blog.nostratech.com/2017/12/sass-css-with-superpowers.html

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 :

1. 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.
2. 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/

Sass - CSS with Superpowers

Hallo teman-teman semuanya, kali ini saya akan mengenalkan tentang salah satu Preprocessor CSS yang sudah cukup berkembang dan diakui sangat membantu oleh para Developer, khususnya teman-teman Front End.

Apa itu Sass?

SASS (Syntactically Awesome Stylesheet) adalah pra-prosesor CSS yang membantu untuk mengurangi pengulangan dengan CSS dan menghemat waktu. Sass membuat CSS lebih stabil dan lebih powerfull dengan ekstensi bahasa CSS yang menggambarkan style dokumen bersih dan struktural.

Mengapa Menggunakan Sass?

1. SASS merupakan bahasa pra - pemrosesan yang menyediakan indentasi sintaks (syntax sendiri) untuk CSS.
2. SASS menyediakan beberapa fitur yang digunakan untuk membuat stylesheet yang memungkinkan menulis kode lebih efisien dan mudah dalam maintenace / perbaikan.
3. Berisi semua fitur CSS dan pra-prosesor open source, yang dicompile dengan menggunakan Ruby.
4. SASS menyediakan dokumen style dalam format struktur lebih baik dari pada CSS. Menggunakan metode yang dapat digunakan kembali, pernyataan logika dan beberapa fungsi yang dibangun seperti manipulasi warna, operator matematika dan parameter.

Sass mempunyai 2 extensi yaitu Sass itu sendiri, dan SCSS. Perbedaannya adalah jika Sass menghilangkan 'titik koma - ;' dan 'kurung kurawal - {}' dan SCSS masih menggunakan. Kalau kita biasa menggunakan CSS Native, pasti akan lebih mudah untuk mempelajari Sass dengan SCSS.

Sass vs SCSS vs CSS

Mengapa SCSS?

1. readibility : syntax sangat mirip dengan CSS
2. learning curve : masih menggunakan CSS dengan Fitur SASS
3. compatibility : File CSS valid di SCSS
4. resources : banyak artikel yang membahas tentang SCSS
5. expandibility: mudah untuk pindah dari scss ke sass

Setelah mengenal apa itu Sass berikut adalah cara Install Sass. Ada 2 metode untuk menginstall Sass tersebut. Yang pertama kita bisa menggunakan Aplikasi :

• Code Kit (Paid)
• Compass (Paid, Open Source)
• Ghostlab (Paid)
• Hammer (Paid)
• Koala (Open Source)
• LiveReload (Paid, Open Source) 
• Prepros (Paid)
• Scout-App (Free, Open Source) 

Lalu bisa menggunakan Command Prompt atau Terminal

1. Sebelum menginstall Sass kita harus mempunyai Ruby terlebih dahulu. Install Ruby untuk Windows dan Linux bisa langsung dari website resmi Ruby https://www.ruby-lang.org. Untuk Mac karena sudah ada Ruby kita tidak perlu menginstallnya.
2. Install Sass dengan menggunakan Command ini : sudo gem install sass
3. Untuk Pengecekan versi bisa menggunakan Command ini : sass -v

Setelah berhasil Install, kita akan belajar tentang kelebihan Sass itu sendiri.

Ada beberapa keunggulan Sass yang tidak ada di CSS, berikut adalah keunggulan Sass :

1. Variable
2. Nesting
3. Mixins
4. Extend
5. Operator

Variable

Dengan menggunakan Variable kita bisa menyimpan sebuah value tersebut untuk dapat di gunakan kembali saat penulisan Sebuah Class. 

Nesting

Di Sass CSS bisa menggunakan nesting untuk memberi style dengan lebih cepat.

CSS                                             SCSS

Mixins

Tujuannya untuk menghindari pengulangan dengan style class yang sama.

SCSS                                       CSS

Bisa Menggunakan Parameter untuk mendapatkan suatu Nilai

Extend

Tujuannya untuk mengambil style dari class lain.

Extend dan Mixin mempunyai fungsi yang sama yaitu untuk mengambil style dari class lain. Bedanya di sini adalah, kalau Mixin tidak bisa dipakai sebagai style karena bukan sebuah class, sedangkan Extend bisa digunakan sebagai style di html karena dia adalah class. Jadi untuk menggunakan Mixin, kita harus memanggil di dalam class lain agar bisa dipakai di HTML.

Operator

 Kita juga bisa menggunakan Penambahan / Pengurangan / Perkalian / Pembagian untuk mendapatkan suatu values.

Itu tadi adalah beberapa keunggulan Saas yang tidak bisa kita jumpai di CSS Native.

Jadi kita sudah belajar tentang Sass. Menurut saya Sass ini memudahkan Developer untuk membuat CSS lebih terstruktur. Selain itu Sass juga mempunyai banyak fitur untuk membuat mudah pengerjaan Styling dan juga Sass lebih berguna untuk Project yang besar karena untuk Projek yang kecil butuh waktu untuk setting dan memahami fitur-fitur Sass.

Terima kasih, semoga bisa menambah ilmu teman-teman semua!!

Referensi : 

http://marksheet.io/sass-mixins.html

http://sass-lang.com/