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.

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

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%'] })
    ];

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

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%'] })
    ];

$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;
    }
}

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

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

Kelebihan

• 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 ...

. 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 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!