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?
- SASS merupakan bahasa pra - pemrosesan yang menyediakan indentasi sintaks (syntax sendiri) untuk CSS.
- SASS menyediakan beberapa fitur yang digunakan untuk membuat stylesheet yang memungkinkan menulis kode lebih efisien dan mudah dalam maintenace / perbaikan.
- Berisi semua fitur CSS dan pra-prosesor open source, yang dicompile dengan menggunakan Ruby.
- 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?
- readibility : syntax sangat mirip dengan CSS
- learning curve : masih menggunakan CSS dengan Fitur SASS
- compatibility : File CSS valid di SCSS
- resources : banyak artikel yang membahas tentang SCSS
- 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
- 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.
- Install Sass dengan menggunakan Command ini : sudo gem install sass
- 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 :
- Variable
- Nesting
- Mixins
- Extend
- 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/
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/
No comments:
Post a Comment