10 Plugin Awesome PostCSS untuk Membuat Anda CSS Wizard

PostCSS adalah alat yang sangat serba boleh yang membolehkannya ubah gaya CSS dengan plugin JavaScript. Kelenturannya terletak pada cara ia dibina.

Bahagian teras PostCSS adalah modul Node.js yang anda boleh pasang dengan npm, dan ia mempunyai ekosistem lebih daripada 200 plugin yang boleh anda pilih untuk digunakan dalam projek anda.

PostCSS bukan merupakan preprocessor, atau postprocessor, kerana plugin PostCSS yang berlainan mungkin jatuh ke salah satu daripada kategori ini, atau kedua-duanya; ia bergantung sepenuhnya kepada anda apa yang anda buat. Dengan PostCSS, anda tidak perlu belajar sintaks yang berbeza seperti dalam kes Sass atau KURANG; anda boleh mula menggunakannya.

PostCSS mengambil fail CSS anda yang sedia ada dan mengubahnya menjadi data yang boleh dibaca JavaScript, maka plugin JavaScript melakukan pengubahsuaian, dan PostCSS mengembalikan versi diubah dari fail asal. Bunyi sejuk, bukan?

Dalam catatan ini, kita akan melihat 10 plugin PostCSS kepada memberi anda gambaran mengenai beberapa perkara hebat yang boleh anda capai dengan alat yang hebat ini.

1. Autoprefixer

Autoprefixer mungkin merupakan plugin PostCss yang paling terkenal, kerana ia digunakan oleh syarikat teknologi terkenal seperti Google, Twitter, dan Shopify. Ia menambah awalan vendor kepada peraturan CSS di mana perlu.

Autoprefixer menggunakan data dari Bolehkah saya Gunakan. Dengan cara ini ia tidak dapat bertarikh, dan sentiasa boleh menggunakan peraturan yang paling terkini. Anda boleh menyemak bagaimana ia berfungsi di laman demo interaktifnya.

2. CSSnext

CSSnext adalah transpiler CSS yang membolehkan anda menggunakan sintaks CSS masa depan di tapak web semasa. W3C mempunyai banyak peraturan CSS yang baru yang tidak dilaksanakan oleh pelayar, tetapi boleh membolehkan pemaju menulis CSS lebih canggih dan lebih mudah. CSSnext telah dibuat untuk merapatkan jurang ini.

Anda perlu melihat ciri-cirinya untuk melihat apa yang boleh anda lakukan dengannya, contohnya anda boleh gunakan pertanyaan media tersuai, pemilih tersuai, pengubah warna, penapis SVG, dan pseudoclasses baru dalam reka bentuk anda.

3. PreCSS

PreCSS adalah salah satu plugin PstCSS yang berfungsi seperti preprocessor CSS. Ia membolehkannya mengambil kesempatan daripada markup seperti Sass dalam fail sytlesheet anda.

Dengan memperkenalkan PreCSS ke dalam aliran kerja anda, anda boleh menggunakan pembolehubah, jika tidak pernyataan, untuk gelung, campuran, @extend dan @import peraturan, bersarang, dan banyak ciri berguna lain dalam kod CSS anda. Dokumentasi Github PreCSS memberikan anda arahan terperinci mengenai cara membuatnya.

4. StyleLint

StyleLint adalah pencipta CSS moden itu membaca dan mengesahkan kod CSS anda. Ia menjadikannya mudah untuk mengelakkan kesilapan dan mendorong anda untuk mengikuti konvensyen pengekodan yang konsisten.

StyleLint memahami sintaks CSS terkini, jadi ia boleh digunakan bersama dengan plugin PreCSS yang telah disebutkan sebelumnya. Ia juga membolehkan anda membuat konfigurasi anda sendiri, dan juga memeriksa jika tetapan anda sah.

5. Aset PostCSS

Plugin Aset PostCSS adalah berguna pengurus aset untuk fail CSS anda. Ia boleh menjadi pilihan terbaik jika anda cenderung mempunyai masalah dengan laluan URL, kerana Aset PostCSS mengasingkan fail stylesheet anda dari perubahan persekitaran.

Anda perlu menentukan laluan beban, laluan relatif, dan laluan asas, dan plugin secara automatik akan mencari aset yang anda perlukan. Sebagai contoh, anda boleh menulis kod berikut jika anda memerlukan URL yang betul foobar.jpg gambar:

 body background: resolve ('foobar.jpg'); 

Aset PostCSS juga menjaga cache aset, seperti yang anda boleh tetapkan cachebuster pemboleh ubah kepada benar jika anda mahu laluan URL diubah secara automatik sekiranya aset diubah suai. Plugin pintar ini juga mengira dimensi (lebar dan ketinggian) fail imej, atau mengubah saiznya menggunakan nisbah pratetap.

6. CSSNano

Sekiranya anda memerlukan fail CSS yang dioptimumkan dan diminimumkan untuk tapak produksi, anda perlu menyemak CSSNano. Ia merupakan plugin modular yang terdiri daripada banyak plugin Plugin PostCSS yang lebih kecil dan bertanggungjawab. Ia bukan sahaja melaksanakan teknik minifikasi asas seperti mengeluarkan ruang putih, tetapi juga mempunyai pilihan lanjutan yang menjadikan pengoptimuman fokus mungkin.

Antara ciri-ciri lain, CSSNano mampu membatalkan nilai z-indeks, mengurangkan pengecam peribadi, menukar panjang, masa dan nilai warna, dan menghapus awalan vendor yang lapuk.

7. Font Magician

Jika anda seorang peminat tipografi canggih, anda pasti akan suka Penyihir Font Plugin PostCSS. Keajaiban Font Magician bergantung kepada keupayaannya secara automatik menghasilkan semua yang diperlukan @ font-face peraturan.

Bagaimana ia berfungsi agak mudah, anda hanya perlu menambahnya font-family: "My Fav Font"; Peraturan CSS ke elemen HTML, dan Font Magician melakukan sisa kerja. Ia boleh menambah Google Font, salinan tempatan font, tipografi Bootstrap, dan juga boleh memuatkan font secara asynchronously. Berikut adalah tapak demo interaktifnya.

8. Tulis SVG

Pernahkah anda tertanya-tanya betapa seronoknya menulis SVG ke dalam fail CSS anda? Dengan bantuan plugin SVG PostCSS Tulis, anda boleh mencapai matlamat ini dengan mudah.

Plugin berguna ini, sebagai contoh, membolehkannya menyimpan latar belakang dan ikon SVG anda dalam fail CSS anda, dan kemudian tambahkan mereka ke elemen HTML yang berkaitan dengan cara berikut:

 @svg square @rect fill: var (- color, black); lebar: 100%; ketinggian: 100%;  .sample latar belakang: svg putih (param persegi (- warna # 00b1ff)); 

9. Grid Hilang

Grid Hilang adalah plugin PostCSS yang hebat yang menyediakan anda dengan hebat Sistem grid CSS itu bukan sahaja berfungsi dengan CSS biasa tetapi juga dengan bahasa preprocessor (Sass, kurang, stylus). Ia menggunakan calc () Fungsi CSS untuk membuat grid indah yang anda boleh gunakan dengan mudah tanpa menghabiskan terlalu banyak masa dengan penyesuaian.

Grid Hilang mempunyai peraturan yang agak mudah, contohnya menentukan ruang dengan lebar 25% tidak memerlukan lebih banyak daripada coretan kod kecil ini:

 div lost-column: 1/4; 

10. Sprite PostCSS

The PostCSS Sprite plugin menjadikannya mudah menjana sprite imej, jadi gambar koleksi diletakkan ke dalam satu fail. Selepas menetap beberapa pilihan, plugin mengambil gambar dari fail stylesheet anda, menggabungkannya menjadi sprite, kemudian mengemas kini rujukan imej di mana sahaja ia diperlukan.

Anda boleh menggunakan penapis dan kerapu yang berbeza untuk menentukan imej yang anda mahu dimasukkan ke dalam sprite, dan anda boleh menetapkan dimensi imej output juga.