Pengenalan kepada Postcss

postcss: alat CSS yang kuat di luar preprocessors

Pengenalan ini kepada PostCSS meneroka kelebihannya ke atas preprocessors CSS tradisional seperti SASS dan kurang, bagaimana ia berfungsi, dan keupayaan ekosistem plugin yang luas.

sorotan utama:

postcss, alat berasaskan node.js, meningkatkan CSS yang sah menggunakan plugin. Ia menghidupkan CSS ke dalam pokok sintaks abstrak (AST), membolehkan manipulasi sebelum menghasilkan output akhir. Ia boleh melengkapkan preprocessors seperti sass, kurang, atau stylus.

• PostCSS menawarkan faedah termasuk parsing CSS standard, integrasi plugin yang disesuaikan, konfigurasi khusus projek, dan keupayaan untuk membuat plugin tersuai. Ramai pemaju sudah menggunakan postcss secara tidak langsung melalui plugin seperti autoprefixer.
• Memerlukan node.js, Postcss mengintegrasikan dengan lancar dengan alat binaan seperti Webpack, Parcel, dan Gulp.Js. Perhatikan bahawa sekurang -kurangnya satu plugin diperlukan untuk fungsi.
• POSTCSS menyokong pembinaan semula automatik pada perubahan fail sumber menggunakan pilihan
. Fail konfigurasi JavaScript membolehkan pengurusan pilihan komprehensif dan tetapan khusus persekitaran (pembangunan vs pengeluaran).
• --watch

Preprocessors: Kekuatan dan kelemahan

Preprocessors seperti SASS, Less, dan Stylus memperkenalkan ciri -ciri seperti bersarang, pembolehubah, dan campuran, meningkatkan pengurusan CSS. Walaupun beberapa ciri ini menjadi CSS asli, preprocessors kekal berharga untuk projek besar dan mengekalkan konsistensi pengekodan.

Walau bagaimanapun, preprocessors mempunyai batasan:

extensibility terhad:

Preprocessors menawarkan set ciri tetap, menjadikannya sukar untuk memperluaskan fungsi di luar keupayaan terbina dalamnya. Fungsi tersuai mungkin mungkin, tetapi tugas -tugas yang kompleks (seperti SVGs yang terbalik) kekal di luar skop mereka. Menguatkuasakan gaya pengekodan juga mencabar.
• sintaks bukan standard:
Preprocessors memperkenalkan sintaks mereka sendiri, yang memerlukan penyusunan sebelum tafsiran penyemak imbas. Ini mewujudkan isu ketergantungan dan memerlukan kemas kini kod jika preprocessor berubah atau menjadi tidak tersedia.
• PostCSS menawarkan alternatif yang menarik.

Memahami postcss

postcss bukan preprocessor; Ia adalah pengubah CSS. Ia memproses CSS yang sah, meningkatkannya melalui plugin. Malah pengguna SASS/kurang sering menggabungkan postcss selepas penyusunan awal. AutoPrefixer, plugin postcss biasa, secara automatik menambah awalan vendor.

postcss sendiri adalah pasif; Ia menghidupkan CSS ke dalam AST. Plugin memproses AST ini, mengubah suai sifat. Postcss kemudian menanam semula CSS dari AST yang diubahsuai.

Dengan kira -kira 350 plugin yang tersedia, meliputi tugas seperti @import pengendalian, calc() penyederhanaan, pemprosesan aset imej, linting, dan minifikasi, PostCSS menawarkan fleksibiliti yang luas. Carian plugin mesra pengguna boleh diakses melalui katalog Plugin Postcss.

Kelebihan PostCSS termasuk:

• standard CSS: PostCSS berfungsi dengan CSS standard, menawarkan keserasian ke belakang. Ia boleh mengalihkan sifat baru kepada setara yang lebih tua, menghapuskan keperluan untuk proses ini sebagai sokongan pelayar bertambah baik. Walaupun plugin boleh mengendalikan sintaks seperti preprocessor, ia tidak wajib.
• Fungsi yang disesuaikan: Gunakan hanya plugin dan ciri yang diperlukan. Ini membolehkan kawalan halus ke atas saluran paip pemprosesan CSS.
• Konfigurasi khusus projek: Konfigurasi plugin secara individu untuk setiap projek, menyesuaikan diri dengan keperluan tertentu.
• Pembangunan plugin tersuai: Buat plugin tersuai dalam JavaScript untuk memperluaskan keupayaan PostCSS.
• Penggantian Preprocessor Potensi: Jika sudah menggunakan plugin seperti AutoPrefixer, PostCSS mungkin menggantikan preprocessor anda, menyelaraskan aliran kerja ke dalam satu langkah.

Memasang dan menggunakan Postcss

postcss memerlukan node.js. Panduan ini menunjukkan pemasangan dan penggunaan baris arahan, walaupun integrasi dengan alat binaan juga mungkin.

1. Pemasangan global:

   <code class="language-bash">npm install -g postcss-cli</code>

2. Sahkan pemasangan:

   <code class="language-bash">postcss --help</code>

3. Pemasangan Plugin (PostCSS-Import):

   <code class="language-bash">npm install -g postcss-import</code>

Buat Projek Sampel (), dengan folder cssproject yang mengandungi src, main.css, dan _reset.css fail (seperti yang diterangkan dalam teks asal). Kemudian jalankan postcss: _elements.css

<code class="language-bash">postcss ./src/main.css --use postcss-import --output ./styles.css</code>

peta sumber, autoprefixer, dan minifikasi

POSTCSS menghasilkan peta sumber sebaris secara lalai. Gunakan

untuk peta luaran dan --map untuk melumpuhkannya (disyorkan untuk pengeluaran). --no-map

autoprefixer menambah awalan vendor:

<code class="language-bash">npm install -g autoprefixer</code>

Gunakannya dengan arahan

, bersama -sama dengan postcss. postcss-import

masukkannya dalam perintah

<code class="language-bash">npm install -g cssnano</code>

anda, dan gunakan

untuk pengeluaran. postcss --no-map

fail binaan dan konfigurasi automatik

pilihan

dan

membolehkan pembinaan semula secara automatik pada perubahan fail. --watch --verbose a Fail Streamlines Configuration:

postcss.config.cjs Gunakan

untuk mod pembangunan dan menghilangkannya untuk pengeluaran.

<code class="language-javascript">// PostCSS configruation
module.exports = (cfg) => {

  const devMode = (cfg.env === 'development');

  return {

    map: devMode ? 'inline' : null,
    plugins: [
      require('postcss-import')(),
      require('autoprefixer')(),
      devMode ? null : require('cssnano')()
    ]

  };

};</code>

--env development Kesimpulan

PostCSS menawarkan pendekatan yang fleksibel dan berkuasa untuk pemprosesan CSS. Dengan menguasai sistem pluginnya, anda boleh membuat aliran kerja yang sangat disesuaikan dan cekap untuk mana -mana projek web. Sumber lanjut disediakan dalam teks asal. Soalan Lazim juga termasuk pada akhir teks asal.

Atas ialah kandungan terperinci Pengenalan kepada Postcss. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!