CSS Preprocessor: SASS
Pengembangan web tidak lepas dari penggunaan CSS, sebuah style sheet language untuk mempercantik tampilan web yang dikembangkan. CSS sangat powerful. Namun masalahnya, ketika website kita semakin besar dan kompleks, kode CSS kita akan ikut menjadi semakin kompleks. Hal tersebut membuat kode kita akan sulit untuk di-maintain atau dipelihara. Jadi, setiap kali kita perlu memperbarui style tertentu, kita perlu membuat perubahan di banyak tempat di file dan di situlah CSS preprocessor muncul.
What is a CSS Preprocessor?
CSS preprocessor merupakan program yang memungkinkan Anda menghasilkan CSS dari sintaks unik yang dimiliki preprocessor itu sendiri.
What is SASS?
SASS (Syntactically Awesome Style Sheets) adalah scripting language dan salah satu CSS preprocessor yang dapat ditulis dengan kode yang lebih clean dan reusable lalu dapat di-compile menjadi CSS yang lebih cepat, lebih mudah, dan lebih elegan. SASS menambahkan fitur di luar dasar CSS yang membantu penulis kode dapat mengatur stylesheet yang digunakan pada kode yang besar lebih mudah di-maintain. SASS menjadi user-friendly karena memiliki fitur tambahan di luar CSS dasar yang useful seperti mixins, nesting, inheritance, dan banyak lagi.
Why should you be using a CSS preprocessor?
CSS preprocessor memiliki potensi untuk mengubah produktivitas dan keterampilan frontend Anda. CSS preprocessor dapat mempercepat waktu pengembangan dan menyelesaikan banyak keterbatasan CSS. Mari kita uraikan beberapa keuntungan utama menggunakan CSS preprocessor:
- They generate cleaner code due to nesting and variables. Salah satu keuntungan besar dari SASS adalah Anda dapat menggabungkan CSS Selector di dalam CSS Selector lain. Ini berarti Anda hanya perlu mengubah nama elemen satu kali dan semua yang menggunakan akan ikut berubah. Demikian pula, dengan SASS, Anda dapat menggunakan variabel. Ini memungkinkan Anda untuk menyimpan nilai dan menggunakannya kembali di seluruh file Anda. Hal itu dapat menyederhanakan kode secara keseluruhan!
- You keep your CSS code Dry (“Don’t repeat yourself”). Karena dapat menggunakan kembali kode yang sudah ditulis, Anda cenderung akan mengurangi membuat kesalahan, kode Anda tetap lebih teratur, dan Anda menghemat waktu dengan tidak mengulangi hal tersebut. Kode yang Anda tulis dan telah diuji akan terus berfungsi di mana pun Anda menggunakannya.
- They provide more flexibility. CSS preprocessor dapat menyelesaikan beberapa fitur yang dianggap kaku di CSS dasar. Ada lebih banyak hal yang dapat Anda lakukan secara spontan ketika Anda menggunakan CSS preprocessor, seperti conditionals atau calculations. Anda bahkan dapat memodifikasi warna dengan cepat sehingga Anda tidak perlu membuat kode keras dalam CSS.
- They are more stable than CSS. CSS preprocessor menambahkan tingkat stabilitas tertentu melalui fitur-fitur seperti mixins, nesting, inheritance, dan banyak lagi. Stabilitas dari preprocessor membuatnya lebih mudah untuk menangani kode yang besar.
- They make CSS code more organized. Fitur seperti variabel dan fungsi berarti Anda dapat mengurangi kompleksitas kode CSS standar, membuatnya jauh lebih mudah dibaca dan terorganisir. Dalam jangka panjang, kode yang terorganisir lebih mudah digunakan, dibagikan, dan diedit.
Dengan keuntungan yang telah dijelaskan tersebut. Dapat disimpulkan bahwa SASS adalah:
- Lebih ringkas.
- Lebih mudah dibaca.
- “Keluhan” lebih sedikit tentang titik koma.
- Didukung oleh komunitas pengembang yang lebih besar.
Selanjutnya kita akan membahas tentang contoh penerapan SASS.
Terimakasih telah membaca!
