Apakah postcss? Mengapa menggunakannya?

Mengapa menggunakan postcss

Dengan perkembangan teknologi, css kini telah berkembang ke peringkat ketiga css3.css3 boleh menyokong kesan yang lebih dinamik pada masa lalu, anda perlukan untuk menggunakan Kebanyakan animasi, peralihan, pengiraan dan fungsi lain yang dilaksanakan dengan js kini boleh dilaksanakan dengan css, dan prestasinya lebih baik. Sudah tentu, dengan keperluan perniagaan, dalam proses menulis css, untuk menjadikan css mempunyai kebolehgunaan semula, fleksibiliti, pembangunan modular dan pengurusan fail gaya js yang lebih baik, rangka kerja css seperti sass muncul.

css prapemproses Sass

sass boleh menyelesaikan beberapa kekurangan css, termasuk tetapi tidak terhad kepada:

1 Gunakan

$content: "Non-null content";
.main {
 content: $content;
}
编译为
.main {
 content: "Non-null content”;
}

di mana-mana sahaja 2. Bersarang: Ia boleh menjelaskan hubungan hierarki ibu bapa-anak dengan lebih baik, memudahkan pengubahsuaian dan carian serta mengurangkan penamaan gaya

.utama {

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }

}
disusun ke dalam
.utama .redbox {

    background-color: #ff0000;
    color: #000000;

}

3. Rujukan gaya campuran: ditakrifkan di satu tempat, disusun menggunakan

di beberapa tempat Sebelum:

@mixin clearfix {
 display: inline-block;
 &:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
.box{
@include clearfix
}

Disusun kepada:

.box{
display: inline-block;
}
.box:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

4. Arahan fungsi: Mulakan pengaturcaraan seperti js

$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
 @return $n * $grid-width + ($n - 1) * $gutter-width;
}
.sidebar { width: grid-width(5); }
编译为
.sidebar { width: 240px; }

4 di atas jenis adalah yang paling biasa, Untuk penggunaan lanjut, sila pergi ke laman web rasmi Sass untuk belajar.

Prapemproses CSS membolehkan pembangun bahagian hadapan mempertingkatkan kelajuan pembangunan CSS dengan lebih baik Serupa dengan sass, terdapat kurang dan Stylus.

Bercakap tentang beberapa masalah yang dihadapi semasa menggunakan sass

1 Berdasarkan Ruby, anda mesti memasang Ruby untuk menggunakan sass, dan ia disusun secara dalaman menggunakan Ruby.

2. Anda perlu memasang node-sass Pada masa ini, bahagian hadapan menggunakan alat pembinaan seperti gulp dan webpack Jika anda menggunakan sass, binaan webpack mesti memasang sass-loader, dan sass-loader bergantung pada node-sass , anda mesti tahu bahawa kelajuan pemasangan node-sass adalah sangat perlahan, terutamanya apabila membangunkan menggunakan sistem tetingkap, apabila npm <5.4, pemasangan node-sass sering gagal.

3. Pencemaran pembolehubah global Dalam proses pembangunan berbilang orang, apabila menentukan pemilih, anda perlu mengambil kira sama ada nama yang sama digunakan di tempat lain.

4. Penyusunan statik: pra-disusun, halaman yang dipaparkan ialah css yang disusun

4. Pada masa ini dalam peringkat CSS3, hala tuju pembangunan CSS pada masa hadapan patut ditunggu Pada masa hadapan, CSS akan menyokong lebih banyak atribut dan fungsi, termasuk pembolehubah, sarang, pengiraan nilai, dsb.

revolusi baharu postcss

takrifan postcss:

PostCSS ialah alat untuk mengubah CSS dengan pemalam JS ini boleh menyokong pembolehubah dan mixin, transpile sintaks CSS masa hadapan, imej sebaris dan banyak lagi css(postcss-cssnext plugin)

Melalui cssnext, kod di atas akan diproses menjadi kandungan berikut

2. Kelajuan penyusunan sangat dipertingkatkan. PostCSS mendakwa 3-30x lebih pantas daripada prapemproses.

3. Sistem pemalam yang kaya, bebaskan tangan anda.

4.css adalah modular dan mengehadkan skop kepada komponen, mengelakkan masalah skop global Anda tidak perlu lagi bimbang tentang nama gaya pendua

:root {
 --heading-color: #ff0000;
}
/ custom selectors /
@custom-selector :--headings h1, h2, h3, h4, h5, h6;
/ usage /
:--headings {
 color: var(--heading-color);
}

Postcss ialah pemproses pasca css yang menyusun css secara dinamik. . Iaitu, kompilasi berlaku pada masa jalan.

Postcss sendiri tidak akan melakukan apa-apa kepada css anda Anda boleh menganggap postcss sebagai shell Bersama-sama dengan ekologi postcss, lebih banyak pemalam postcss diperoleh, yang boleh membantu anda menyelesaikan lebih daripada 95% soalan css anda. Jika anda memerlukan Peribadikan spesifikasi penulisan css yang memenuhi keperluan perniagaan anda sendiri, maka anda juga boleh membangunkan pemalam postcss khusus untuk tujuan ini.

h1,
h2,
h3,
h4,
h5,
h6 {
 color: #ff0000;
}

Konfigurasi Postcss dalam webpack

npm Pasang postcss-loader, postcss-cssnext: npm install postcss-loader postcss-cssnext -D

webpack.config.js

postcss插件参考

• postcss-modules dan react-css-modules secara automatik mengasingkan pemilih dalam komponen.
• postcss-autoreset ialah alternatif untuk menggunakan autoset tetapan semula global yang lebih baik untuk komponen boleh diasingkan.
• postcss-initial menambah semua: sokongan awal, yang menetapkan semula semua gaya yang diwarisi.
• autoprefixer menambah awalan vendor, menggunakan data daripada Can I Use.
• postcss-preset-env membolehkan anda menggunakan ciri CSS masa hadapan hari ini.
• precss mengandungi pemalam untuk ciri seperti Sass, seperti pembolehubah, bersarang dan campuran.
• postcss- aset memasukkan dimensi imej dan menyelaraskan fail.
• postcss-sprite menjana sprite imej.
• postcss-inline-svg membolehkan anda menyelaraskan SVG dan menyesuaikan gayanya.
• postcss- write-svg membolehkan anda menulis SVG ringkas terus dalam CSS anda.
• sintaks tukar postcss-sintaks secara automatik melalui sambungan fail.
• gaya penghuraian postcss-html dalam