9 Mixin Perpustakaan Untuk Pereka Sass Harus Dapat
Jika anda menggunakan Sass dalam aliran kerja pembangunan anda, anda tahu pentingnya campuran. Apabila anda melihat beberapa perkara yang ditulis berkali-kali dan membosankan dalam CSS, itu di mana campuran boleh membantu anda mencegah kerja berulang. Mixin mengandungi pengisytiharan CSS yang boleh digunakan semula di seluruh tapak anda.
Terdapat banyak campuran dibuat oleh pemaju, untuk membantu anda semasa bekerja dengan Sass dalam perkembangan anda. Kebanyakan meliputi perkara yang sering berulang dalam CSS. Dari mengadaptasi merentas berbilang penyemak imbas kepada mewujudkan butang, animasi dan kesan peralihan, cari ini dan banyak lagi dalam 11 perpustakaan mixin berikut yang anda perlu dapatkan untuk pembangunan Sass anda.
1. Bourbon
Bourbon adalah perpustakaan Sass yang mengandungi campuran, fungsi, dan tambahan yang membolehkan anda memudahkan penciptaan stylesheets untuk kegunaan silang pelayar. Bagi saya, ini adalah campuran Sass yang paling mengagumkan. Ia mengandungi hampir semua yang anda perlukan untuk gaya laman web anda sambil mengekalkan gaya lembaran anda ringan.
Lihat dokumentasi lengkap untuk menggunakan setiap mixin dan fungsi yang ada.
2. Sass CSS3 Mixins
Sass CSS3 Mixins menyediakan campuran yang berfungsi merentas pelayar yang berbeza. Anda akan mendapati banyak campuran praktik terbaik di sini seperti latar belakang, sempadan, kotak, lajur, muka font, transformasi, peralihan, dan animasi. Ia cukup untuk keperluan gaya anda. Untuk menggunakan, import css3-mixins.scss dan panggil mixin dalam kelas CSS anda.
Muat turun mixin ini di sini.
3. CssOwl
CssOwl menyediakan campuran berguna untuk menetapkan kedudukan unsur (relatif atau mutlak) dan menambah kandungan dengan pseudo pemilih ( : selepas dan : sebelum). Ia juga membantu apabila anda ingin membuat elemen sprit: mixin memberikan fleksibiliti untuk menetapkan kedudukan imej dalam sprite anda. Selain Sass, perpustakaan mixin CssOwl juga tersedia untuk LESS dan Stylus.
4. Breakpoint Sass
Breakpoint membantu anda membuat pertanyaan media melalui Sass dengan cara yang mudah. Dengan Breakpoint, anda boleh membuat pembolehubah dan memberikan nilai yang menentukan lebar lebar atau lebar lebar pertanyaan media. Oleh kerana pembolehubah yang anda buat mempunyai nama yang bermakna, anda boleh memanggilnya dengan mudah untuk digunakan di Sass.
5. Scut
Scut mengandungi satu set mixass, placeholder, fungsi, dan pembolehubah yang boleh diguna semula yang dapat membantu anda dengan mudah melaksanakan corak kod-pola yang sama. Ia menyediakan kod praktik terbaik untuk membuat barangan web seperti susun atur halaman dan dalam tipografi gaya. Anda boleh mengurangkan pengulangan semasa menulis kod dengan menggunakan semula kod lebih kerap. Oleh itu, membantu anda lebih teratur dalam proses ini.
6. Saffron
Dengan Saffron, anda boleh menambah animasi dan peralihan CSS3 dengan mudah. Terdapat selusin animasi dan peralihan yang tersedia, termasuk pudar masuk / keluar, slaid masuk / keluar, naik / keluar serta pelbagai kesan seperti shake, teeter, bounce, dan lain-lain. Untuk menggunakan Saffron hanya masukkan mixin dalam perisytiharan Sass, dan panggil nama kesan di dalam kelas CSS anda. Anda boleh mendapatkan Saffron dengan memasang menggunakan Bower atau Gem, atau muat turun secara manual dari Github.
7. Taip Tetapan
TypeSettings adalah sejenis toolkit untuk Sass. Ia akan menetapkan saiz fon dalam skala modular menggunakan em (bukan rem atau piksel), irama menegak, dan tajuk utama berasaskan nisbah responsif. Anda boleh memasang ini dengan Bower juga, muat turun pembebasan, atau klikan repo. Untuk maklumat lanjut, lihat halamannya.
8. Sass Line
Sass Line adalah campuran Sass yang membantu anda membuat tipografi lebih baik. Ia menggunakan unit rem pada fon anda supaya anda boleh bekerja secara proporsional dari grid asas. Sass Line menggunakan irama menegak yang tepat berdasarkan grid asas, dan membolehkan anda menetapkan skala modular untuk setiap titik putus anda untuk mendapatkan perkadaran yang baik di semua aspek laman web anda.
Pergi ke sini untuk mendapatkan maklumat lanjut mengenai cara menggunakannya.
9. Andy.scss
Andy.scss adalah koleksi campuran Sass yang berguna, dibina untuk membantu anda mengembangkan rupa laman web dengan mudah sambil mengekalkan cahaya. Terdapat banyak campuran Sass yang tersedia, dari latar belakang hingga animasi. Hampir semua ciri CSS yang biasa digunakan di sini. Dapatkannya di Github.
Lebih banyak Posts on Sass:
- Bermula Dengan Sass
- Menggali Ke Sass
- Bagaimana Untuk Menyusun Sass Dengan Teks Sublime
- Menggunakan Bootstrap 3 Dengan Sass
- Bagaimana Membina VCard Dalam Talian Dengan Sass & Compass
- Preprocessor Perbandingan CSS Berbanding: Sass Vs. Kurang
- Stylesheets Awesome Syntactically: Menggunakan Compass In Sass
- Cara Menukar CSS Untuk Sass & SCSS
