9 Perpustakaan Mixin Untuk Desainer Sass Harus Dapatkan
Jika Anda menggunakan Sass dalam alur kerja pengembangan Anda, Anda tahu pentingnya mixin. Ketika Anda melihat beberapa hal yang tertulis berulang-ulang dan menjemukan di CSS, di situlah mixin dapat membantu Anda mencegah pekerjaan berulang. Mixin berisi deklarasi CSS yang dapat Anda gunakan kembali di seluruh situs Anda.
Ada banyak mixin yang dibuat oleh pengembang, untuk membantu Anda ketika bekerja dengan Sass dalam pengembangan Anda. Sebagian besar membahas hal-hal yang sering berulang dalam CSS. Dari beradaptasi di banyak browser untuk membuat tombol, animasi dan efek transisi, temukan ini dan lainnya di 11 perpustakaan mixin berikut yang harus Anda dapatkan untuk pengembangan Sass Anda.
1. Bourbon
Bourbon adalah pustaka Sass yang berisi mixin, fungsi, dan addons yang memungkinkan Anda menyederhanakan pembuatan stylesheet untuk penggunaan lintas-browser. Bagi saya, ini adalah mixin Sass yang paling luar biasa. Ini berisi hampir semua yang Anda butuhkan untuk mendesain situs web Anda sembari menjaga stylesheet Anda tetap ringan.
Lihat dokumentasi lengkap untuk menggunakan setiap mixin dan fungsi yang tersedia.
2. Mixins Sass CSS3
Sass CSS3 Mixins menyediakan mixin yang berfungsi di berbagai browser. Anda akan menemukan banyak campuran praktik terbaik di sini seperti latar belakang, batas, kotak, kolom, wajah font, transformasi, transisi, dan animasi. Sudah cukup untuk kebutuhan penataan rambut Anda. Untuk menggunakan, impor css3-mixins.scss dan panggil mixin di kelas CSS Anda.
Unduh mixin ini di sini.
3. CssOwl
CssOwl menyediakan mixin yang berguna untuk mengatur posisi elemen (relatif atau absolut) dan menambahkan konten dengan pemilih semu ( :setelah dan :sebelum). Ini juga membantu ketika Anda ingin membuat elemen sprite: mixin memberikan fleksibilitas untuk mengatur posisi gambar dalam sprite Anda. Selain Sass, perpustakaan mixin CssOwl juga tersedia untuk KURANG dan Stylus.
4. Breakpoint Sass
Breakpoint membantu Anda membuat kueri media melalui Sass dengan cara sederhana. Dengan Breakpoint, Anda bisa membuat variabel dan memberinya nilai yang menentukan lebar minimum atau lebar maks pertanyaan media. Karena variabel yang Anda buat memiliki nama yang bermakna, Anda dapat memanggilnya dengan mudah untuk digunakan di Sass.
5. Scut
Scut berisi seperangkat mixin Sass, placeholder, fungsi, dan variabel yang dapat digunakan kembali yang membantu Anda dengan mudah menerapkan pola kode gaya umum. Ini memberikan kode praktik terbaik untuk membuat hal-hal web seperti tata letak halaman dan tipografi gaya. Anda dapat mengurangi pengulangan saat menulis kode dengan menggunakan kembali kode tersebut lebih sering. Dengan demikian, membantu Anda lebih terorganisir dalam proses tersebut.
6. Safron
Dengan Saffron, Anda dapat menambahkan animasi dan transisi CSS3 dengan mudah. Ada selusin animasi dan transisi yang tersedia, termasuk fade in / out, slide in / out, naik / turun serta efek lain-lain seperti shake, teeter, bouncing, dan lainnya. Untuk menggunakan Saffron cukup masukkan mixin dalam deklarasi Sass, dan panggil nama efek di dalam kelas CSS Anda. Anda bisa mendapatkan Saffron dengan menginstalnya menggunakan Bower atau Gem, atau cukup unduh secara manual dari Github.
7. Ketikkan Pengaturan
TypeSettings adalah jenis toolkit untuk Sass. Ini akan mengatur ukuran font dalam skala modular menggunakan em (bukan rem atau piksel), ritme vertikal, dan tajuk berbasis rasio responsif. Anda dapat menginstal yang ini dengan Bower juga, mengunduh rilis, atau mengkloning repo. Untuk detail lebih lanjut, lihat halamannya.
8. Sass Line
Sass Line adalah Sass mixin yang membantu Anda membuat tipografi yang lebih baik. Ini menggunakan unit rem pada font Anda sehingga Anda dapat bekerja secara proporsional dari garis dasar. Sass Line menggunakan ritme vertikal yang tepat berdasarkan garis dasar, dan memungkinkan Anda mengatur skala modular untuk setiap breakpoint Anda untuk mendapatkan proporsi yang baik di semua aspek situs web Anda.
Buka di sini untuk mendapatkan detail lebih lanjut tentang cara menggunakannya.
9. Andy.scss
Andy.scss adalah kumpulan mixin Sass yang berguna, dibuat untuk membantu Anda mengembangkan tampilan situs web dengan mudah sambil menjaganya tetap ringan. Ada puluhan Sass mixin yang tersedia, dari latar belakang hingga animasi. Hampir semua properti CSS yang umum digunakan dibahas di sini. Dapatkan di Github.
Lebih banyak posting di Sass:
- Memulai dengan Sass
- Menggali Ke Sass
- Cara Mengkompilasi Sass Dengan Teks Luhur
- Menggunakan Bootstrap 3 Dengan Sass
- Cara Membangun VCard Online Dengan Sass & Kompas
- Preprocessor CSS Dibandingkan: Sass Vs. KURANG
- Lembar Gaya Keren yang Secara Sintaksis: Menggunakan Kompas di Sass
- Cara Mengonversi CSS Menjadi Sass & SCSS
