Kalau kamu menggunakan Sass dalam alur kerja pengembangan, Kamu pasti tahu pentingnya mixin. Ketika kamu melihat beberapa hal yang ditulis berulang-ulang dan perlahan dalam CSS, di situlah mixin dapat membantumu mencegah pekerjaan berulang-ulang. Sebuah mixin berisi deklarasi CSS yang dapat digunakan kembali seluruh situsmu.
Namun, apa sebenarnya Sass itu? Sass adalah pengembangan dari CSS, namun telah diperkuat dengan beberapa elemen penting mixin, variables dll. SASS menyediakan pengembang web dengan lebih banyak pilihan dan menawarkan lebih banyak kebebasan saat menulis CSS. Bahkan, menyerupai bahasa pemrograman yang bersarang di dalam CSS. Dan di sini kita akan membahas tentang mixin library sass yang harus dimiliki oleh designer. Apa sajakah itu?
1. Bourbon
Bourbon adalah Sass library yang berisi mixin, functions, dan addons yang memungkinkan kamu untuk menyederhanakan pembuatan stylesheet pada cross-browser. Ini adalah Sass mixin yang paling luar biasa. Mixin ini juga berisi hampir semua yang kamu butuhkan untuk gaya website sekaligus menjaga stylesheet agar tetap ringan.
2. Sass CSS3 mixin
Sass CSS3 mixin menyediakan mixin yang bekerja di browser berbeda. Kamu akan menemukan sekelompok praktek mixin terbaik di sini, seperti background, border, box, column, font-face, transform, transition, dan animation. Ini cukup untuk kebutuhan styling kamu.
3. Sassmatic
Ingin menyaring gambar dengan efek yang menakjubkan di Sass? Sassmatic-lah yang mungkin kamu butuhkan. Ini adalah perpustakaan filter foto, yang menggunakan Sass dan Compass, yang memberikan 14 efek filter pada gambarmu termasuk lomo, cooling, warming, sepia, dan lain-lain.
4. CssOwl
CssOwl menyediakan mixin yang berguna untuk mengatur posisi elemen (relative atau absolute) dan menambahkan konten dengan pseudo selector (:after and :before). Hal ini juga dapat membantu ketika kamu ingin membuat elemen sprite : mixin memberikan fleksibilitas untuk mengatur posisi gambar dalam sprite.
5. Breakpoint Sass
Breakpoint membantu membuat media queries. melalui Sass dengan cara yang sederhana. Dengan Breakpoint, kamu dapat membuat variabel dan memberikan nilai yang menentukan min-width atau max-width dari media queries. Mixin ini sangat mudah digunakan dalam sass.
6. Scut
Scut berisi satu set Sass mixin yang dapat digunakan berulang kali, placeholders, functions, dan variables yang membantumu menerapkan pola gaya-kode umum dengan mudah. Ini menyediakan kode praktek terbaik untuk membuat beberapa hal dalam web seperti page layout dan styling typography. Kamu dapat mengurangi pengulangan saat menulis kode dengan menggunakan kembali kode lebih sering. Dengan demikian, ini akan membantumu mendapatkan proses yang lebih terorganisir.
7. Buttons
Buttons adalah library yang membantu membuat tombol dalam gaya yang indah. Kamu akan mendapatkan gaya tombol yang telah ditetapkan seperti Flat, Glow, Rounded, 3D, Border, Pill, Circle, dan dropdown. Untuk penggunaan cepat masukkan button.css ke HTML.
8. Saffron
Dengan Saffron, kamu dapat menambahkan animasi CSS3 dan transisi dengan mudah. Ada selusin animasi dan transisi yang tersedia, termasuk fade in/out, slide in/out, rise in/out serta efek lain-lain seperti shake, teeter, bounce, dan lain-lain.
9. TypeSettings
TypeSettings adalah jenis toolkit untuk Sass. Ini akan mengatur font-size dalam skala modular menggunakan em,vertical rhythm, dan responsive ratio berdasarkan headline.
10. Sass Line
Sass Line adalah mixin Sass yang membantumu membuat tipografi yang lebih baik. Ini menggunakan satuan Rems pada font kamu sehingga kamu dapat bekerja secara proporsional dari baseline grid. Sass Line menggunakan irama vertikal tepat berdasarkan baseline grid, dan memungkinkan menetapkan skala modular pada setiap breakpoints untuk mendapatkan proporsi yang baik di semua aspek dari situsmu. Namun di sini kamu juga wajib belajar prinsip dasar typography agar semakin sempurna.
11. Andy.Scss
Andy.scss adalah kumpulan mixin Sass yang berguna, dibangun untuk membantumu mengembangkan website dengan mudah. Ada puluhan Sass mixin yang tersedia, dari latar belakang sampai animasi. Hampir semua properti CSS yang umum digunakan dibahas di sini.
Itulah tadi mixin library sass yang harus kamu miliki jika kamu adalah seorang designer. Mixin mana sajakah yang kamu sukai? Atau kamu merasa bahwa harus memiliki semuanya?
