Cara Membina Preprocessor CSS Anda Sendiri Dengan PostCSS

mata utama

PostCSS membolehkan pemaju membina preprocessors CSS mereka sendiri, memberikan kelonggaran dan kawalan yang lebih besar ke atas preprocessors lain seperti SASS, KURANG atau STYLUS. Ia menggunakan plugin JavaScript untuk memanipulasi gaya dan dapat menambah ciri-ciri seperti preprocessor seperti pembolehubah, campuran, dan bersarang.
Kelebihan postcss termasuk modularity, membina ringan, pelaksanaan segera ciri -ciri baru, dan keupayaan untuk menguatkuasakan strategi pembangunan. Ia juga lebih cepat daripada preprocessors tradisional. Walau bagaimanapun, ia juga mempunyai beberapa kelemahan, seperti peningkatan kerumitan proses membina, sintaks yang berbeza, dan keperluan untuk CSS yang berkesan.
Walaupun PostCSS mempunyai potensi yang besar, ia mungkin tidak sesuai untuk semua projek. Ia boleh menjadi pilihan yang menarik untuk projek kecil, mudah atau pasukan tunggal. Tetapi untuk pasukan atau projek besar, preprocessors sedia ada mungkin masih menjadi pilihan pertama kerana pemahaman dan penggunaan SASS yang luas.

Banyak pemaju telah mengadopsi kurang, stylus atau sass yang paling popular pada masa ini. Sebaik-baiknya, anda juga harus memproses CSS anda menggunakan autoprefixer untuk menambah awalan vendor apabila diperlukan tanpa menggunakan kerangka seperti mixin atau kompas. AutoPrefixer adalah plugin untuk PostCSS; Terdapat banyak plugin lain yang melaksanakan ciri-ciri seperti preprocessor seperti pembolehubah, campuran, dan bersarang. Artikel baru -baru ini Ben Frain "Breaking Up With Sass: Bukan Anda, Ini Saya" mengemukakan cadangan yang menarik. Memandangkan anda boleh menggunakan postcss untuk membuat preprocessor CSS yang anda mahukan, adakah anda benar -benar memerlukan sass, kurang atau stylus? Parser seperti sass asas boleh dibuat semasa proses binaan anda. Dalam contoh ini, saya akan menggunakan fail tugas gulp.js, tetapi konsep yang sama berlaku untuk mengerang atau mana -mana sistem binaan lain. Pertama, kami menggunakan NPM untuk memasang postcss dan plugin yang diperlukan, contohnya:

npm install gulp-postcss postcss-mixins postcss-simple-vars postcss-nested autoprefixer-core --save-dev

kemudian buat pelbagai fungsi pemprosesan CSS dalam gulpfile.js, contohnya:

var
    gulp = require('gulp'),
    postcss = require('gulp-postcss'),
    processors = [
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-nested'),
        require('autoprefixer-core')({ browsers: ['last 2 versions', '> 2%'] })
    ];

dan tulis tugas pemprosesan CSS, contohnya:

// 编译CSS
gulp.task('css', function() {
  return gulp.src('source/css/styles.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('dest/styles/'));
});

Anda juga boleh menggunakan API POSTCSS untuk membuat fungsi pemprosesan anda sendiri. Sebagai contoh, kita boleh memohon sentuhan sans-serif untuk semua pengisytiharan font keluarga:

processors = [
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-nested'),
        function(css) {
            // sans-serif 后备
            css.eachDecl('font-family', function(decl) {
                decl.value = decl.value + ', sans-serif';
            });
        },
        require('autoprefixer-core')({ browsers: ['last 2 versions', '> 2%'] })
    ];

Jika fail /source/css/styles.css mengandungi kod berikut:

$colorfore: #333;
$colorback: #fff;

@define-mixin reset {
    padding: 0;
    margin: 0;
}

main {
    font-family: Arial;
    @mixin reset;
    color: $colorfore;
    background-color: $colorback;

    article {
        color: $colorback;
        background-color: $colorfore;
    }
}

Running Gulp CSS akan mencipta CSS ini di /dest/css/styles.css:

main {
    font-family: Arial, sans-serif;
    padding: 0;
    margin: 0;
    color: #333;
    background-color: #fff;
}

main article {
    color: #fff;
    background-color: #333;
}

Kelebihan

PostCSS membolehkan anda menyingkirkan sekatan dan pilihan yang dikenakan oleh penulis preprocessor. Kaedah ini memberikan beberapa faedah:

• modular anda hanya perlu menambah plugin dan fungsi yang diperlukan untuk projek anda.
• Lightweight Preprocessors menjadi semakin besar dan kompleks. Anda mungkin tidak mahu atau menggunakan setiap ciri, tetapi mereka masih wujud. POSTCSS mengurangkan jumlah.
• Pelaksanaan Segera Pernahkah anda menunggu ciri -ciri tertentu untuk tersedia di Sass, Libsass, Less, Stylus, atau Preprocessors lain? Anda boleh menggunakan sekarang ...
Fungsi JavaScript JavaScript
• preprocessor CSS anda menggunakan JavaScript -bahasa pengaturcaraan sebenar (walaupun ada yang mengatakan demikian!). Sebilangan besar struktur bahasa preprocessor adalah asas. Anda sering melihat fungsi dan campuran yang lebih kompleks dan sukar difahami daripada CSS asal yang mereka buat. Dengan PostCSS, anda boleh membuka fail dengan mudah, dibaca dari pangkalan data, mengeluarkan permintaan HTTP, atau melakukan pengiraan yang kompleks.
• Menguatkuasakan Strategi Pembangunan Katakan anda mahu pasukan anda mengelakkan menggunakan @Extend pernyataan. Kecuali mereka menambah plugin Extend ke proses binaan, @Extend tidak akan tersedia kepada sesiapa sahaja. Ini akan segera jelas.
• Ia pantas - sangat cepat Pengarang menganggarkan postcss adalah 4-40 kali lebih cepat daripada preprocessors yang setara. Jika hanya beberapa plugin yang diperlukan, saya fikir manfaatnya akan lebih tinggi. Seluruh penyelesaian dibina di JavaScript dan tidak perlu melompat ke perpustakaan lain atau jurubahasa bahasa.

Kekurangan

jadi semuanya baik -baik saja? Malangnya, postcss bukan penyelesaian yang sempurna:

• Peningkatan kerumitan Proses binaan anda akan menjadi lebih sukar untuk dikendalikan. Menambah SASS biasanya garis atau dua kod, tetapi POSTCSS memerlukan lebih banyak perancangan - terutamanya kerana plugin perlu dipanggil dalam urutan tertentu. Sebagai contoh, @import inline harus dihuraikan sebelum menghuraikan pembolehubah. Tetapi bagaimana jika pengisytiharan @import anda mengandungi pembolehubah? Dalam sesetengah kes, mungkin perlu memanggil plugin beberapa kali.
• sintaks yang berbeza Saya pada mulanya cuba menukar projek sass kecil ke postcss. Jangan mencuba! Walaupun saya akhirnya berjaya, plugin PostCSS sering menggunakan sintaks yang sedikit berbeza seperti @define-mixin bukan @mixin. Ini boleh membawa kepada Obfuscation dan banyak kemas kini kod. Sebahagian daripada sebabnya adalah ...
• POSTCSS memerlukan CSS yang sah Kebanyakan preprocessors menghuraikan fail teks biasa, jadi mana -mana sintaks secara teorinya mungkin. PostCSS mencipta model objek, jadi ia memerlukan CSS yang betul secara sintaktik dari awal. Malah A // Single Line Comment boleh menyebabkan ia gagal. Anda boleh memproses fail CSS anda sebelum menyampaikannya ke postcss, tetapi kemudian anda kembali menggunakan preprocessor!

Sekiranya anda berputus asa pada preprocessor anda?

Jika anda memulakan projek mandiri yang kecil dan mudah pada satu pasukan, pemproses PostCSS tersuai boleh menjadi pilihan yang menarik. Saya juga mengesyorkan postcss untuk sebarang real tugas postprocessing seperti awalan vendor, pertanyaan media pembungkusan ke dalam satu perisytiharan, mengurangkan persamaan calc (), menyokong aplikasi pelayar lama, menyokong pemilih CSS4, mengecut, dan lain -lain. Tidak ada manfaat dalam melakukan tugas -tugas ini sendiri. Walau bagaimanapun, SASS telah mencapai jisim kritikal. Tiada sintaks preprocessor yang sempurna, tetapi ia akan difahami oleh kebanyakan pemaju dalam pasukan anda. Sebarang perbezaan halus tidak mungkin memberi manfaat atau merayu kepada semua orang. Iaitu, PostCSS dan kerangka kerja kerja yang sama mempunyai potensi yang besar. Jika sistem pemalam CSS modular boleh meniru - atau juga bercampur -sintaks dan fungsi sass, kurang dan stylus yang kita mahu, kita akan mempunyai preprocessor yang boleh mengalahkan semua peralatan preprocessors yang lain. Anda boleh bertaruh bahawa seseorang sedang membangunkan projek ini sekarang ...

Adakah anda berjaya menggunakan PostCSS sebagai preprocessor untuk projek anda? Adakah ia menarik anda dari sass? Adakah anda akan berhijrah dari kurang? Adakah anda akan berputus asa di Stylus?

Soalan Lazim Mengenai Postcss

Apakah perbezaan utama antara POSTCSS dan preprocessors CSS yang lain?

POSTCSS adalah alat yang menggunakan plugin JavaScript untuk menukar gaya. Plugin ini boleh melaksanakan pelbagai tugas seperti penyortiran kod, menambah awalan vendor, dan bahkan membolehkan keupayaan CSS masa depan. Tidak seperti preprocessors CSS yang lain seperti SASS atau kurang, POSTCSS tidak mempunyai sintaks terbina dalam. Sebaliknya, ia menggunakan plugin untuk menukar CSS. Ini menjadikannya lebih fleksibel dan disesuaikan kerana anda hanya boleh memilih plugin yang anda perlukan untuk projek anda.

Bagaimana cara memasang dan menggunakan postcss?

Untuk memasang postcss, anda perlu memasang node.js dan npm pada komputer anda. Kemudian, anda boleh memasang postcss secara global menggunakan arahan

. Untuk menggunakan PostCSS, anda perlu memasang plugin yang ingin anda gunakan dan kemudian buat fail konfigurasi yang menentukan plugin yang anda mahu gunakan. Kemudian, anda boleh menjalankan postcss pada fail CSS anda menggunakan arahan npm install -g postcss-cli. postcss input.css -o output.css

Apakah beberapa plugin postcss yang popular?

Terdapat banyak plugin PostCSS yang tersedia, masing -masing dengan tujuan yang berbeza. Beberapa plugin popular termasuk AutoPrefixer, yang secara automatik menambah awalan vendor ke CSS anda;

Bolehkah saya menggunakan postcss dengan preprocessors CSS yang lain?

Ya, anda boleh menggunakan PostCSS dengan preprocessors CSS lain seperti SASS atau kurang. Ini membolehkan anda memanfaatkan keupayaan preprocessors ini sementara juga mendapat manfaat daripada fleksibiliti dan kuasa postcss.

Apakah faedah menggunakan postcss?

PostCSS menyediakan banyak faedah. Ia sangat disesuaikan, membolehkan anda memilih hanya plugin yang anda mahukan. Ini boleh membawa kepada proses membina yang lebih kecil dan lebih cepat. PostCSS juga membolehkan anda menggunakan ciri CSS masa depan hari ini, dan secara automatik menambah awalan vendor ke CSS anda, menjimatkan masa anda dan memastikan gaya anda berfungsi dengan baik dalam penyemak imbas yang berbeza.

Apakah kelemahan menggunakan postcss?

Walaupun PostCSS adalah kuat dan fleksibel, lengkung pembelajarannya mungkin lebih curam daripada preprocessors CSS yang lain. Kerana ia bergantung pada plugin, anda perlu meluangkan masa untuk meneliti dan memilih plugin yang tepat untuk projek anda. Juga, kerana ia adalah alat yang lebih baru, ia mungkin tidak disokong secara meluas atau diterima pakai sebagai preprocessors lain.

bagaimana postcss mengendalikan mixin?

Postcss mengendalikan Mixin melalui plugin PostCSS-Mixins. Plugin ini membolehkan anda menentukan dan menggunakan mixin dalam CSS, sama seperti apa yang anda lakukan dalam sass atau kurang. Anda boleh menentukan mixin dalam fail konfigurasi PostCSS dan menggunakannya dalam CSS anda menggunakan kata kunci @mixin.

Bolehkah saya menggunakan postcss dalam projek saya yang sedia ada?

Ya, anda boleh mengintegrasikan postcss ke dalam projek anda yang sedia ada. Anda hanya perlu memasang POSTCSS dan plugin yang anda mahu gunakan, dan kemudian sediakan fail konfigurasi POSTCSS. Anda kemudian boleh menjalankan PostCSS pada fail CSS yang sedia ada.

Bagaimanakah PostCSS berbanding dengan alat lain seperti AutoPrefixer atau CSSNext?

AutoPrefixer dan CSSNext sebenarnya plugin PostCSS. Ini bermakna mereka adalah alat yang berjalan di atas postcss, memanfaatkan seni bina pemalamnya. AutoPrefixer menambah awalan vendor ke CSS anda, sementara CSSNext membolehkan anda menggunakan ciri CSS masa depan hari ini.

Adakah postcss sesuai untuk projek besar?

Ya, PostCSS sesuai untuk projek -projek saiz apa pun. Kerana ia boleh disesuaikan, anda boleh memilih hanya plugin yang anda mahu, membolehkan proses membina yang lebih kecil dan lebih cepat. Ini menjadikannya pilihan yang baik untuk projek besar di mana prestasi adalah masalah.

Atas ialah kandungan terperinci Cara Membina Preprocessor CSS Anda Sendiri Dengan PostCSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!