Banyak pembungkus web termasuk pemprosesan sass, tetapi anda juga boleh menggunakan postcss tanpa mengetahui. PostCSS terutamanya dikenali dengan plugin autoprefixernya, yang secara automatik menambah -WebKit, -moz, dan -ms vendor awalan ke sifat CSS apabila diperlukan. Sistem pluginnya bermakna ia boleh melakukan lebih banyak ...
Sebagai contoh, anda boleh menyusun fail .scss tanpa menggunakan pengkompil SASS. Tutorial ini menerangkan cara membuat preprocessor CSS tersuai yang menyusun sintaks SASS dan menambah lebih banyak ciri. Ia sesuai untuk sesiapa sahaja yang tahu beberapa node.js dan mempunyai keperluan CSS tertentu.
mata utama
postcss-scss dan postcss-advanced-variables. postcss-nested
autoprefixer Gunakan pemalam untuk meningkatkan fungsi: PostCSS melampaui fungsi preprocessor tradisional, dan pemalamnya boleh mengendalikan token reka bentuk, mengoptimumkan pertanyaan media, menguruskan aset, dan juga melaksanakan pemampatan CSS berdasarkan persekitaran. menyusun kod sumber demo SRC/SCSS/main.scss untuk membina/css/main.css menggunakan arahan berikut:
Gunakan arahan berikut untuk disusun secara automatik apabila fail berubah:
<code>npm run css:dev</code>
dan kemudian keluar pemantauan dengan menekan
<code>npm run css:watch</code>
| Kedua -dua pilihan ini juga membuat peta sumber dalam binaan/css/main.css.map yang merujuk kepada fail sumber asal dalam alat pemaju. CSS termampat peringkat pengeluaran tanpa peta sumber boleh disusun menggunakan arahan berikut:
Untuk maklumat lanjut, lihat fail ReadMe.md.Sekiranya anda menggantikan SASS dengan POSTCSS?
pengkompil SASS tidak mempunyai masalah, tetapi sila pertimbangkan faktor -faktor berikut.
<code>npm run css:build</code>
Versi terbaru Dart Sass boleh dipasang secara global menggunakan Node.js NPM Package Manager:
<code>npm run css:dev</code>
menyusun kod SASS .SCSS dengan arahan berikut:
<code>npm run css:watch</code>
Secara automatik menjana peta sumber (--No-Source-Map akan menutupnya) atau menambah-Watch untuk menyusunnya secara automatik apabila fail sumber berubah.
Versi terbaru ruang pemasangan SASS kurang dari 5MB.
POSTCSS perlu memerlukan kurang sumber, dan pengkompil gaya SASS asas dengan awalan automatik dan pemampatan memerlukan kurang daripada 1MB ruang. Malah, folder Node_modules anda akan berkembang menjadi lebih dari 60MB dan akan meningkat dengan pesat apabila lebih banyak plugin ditambah. Ini terutamanya mengenai memasang kebergantungan lain dalam npm. Walaupun postcss tidak boleh menggunakannya, ia tidak boleh dianggap sebagai alternatif yang ringan.
Kelajuan pemprosesan
. Postcss adalah JavaScript tulen, dan sementara tanda aras akan berubah, ia boleh menjadi tiga kali lebih lambat apabila menyusun kod sumber yang sama.
custom
Bahasa Sass mengandungi sejumlah besar fungsi, termasuk pembolehubah, bersarang, bahagian, pencampuran, dll. Tetapi terdapat beberapa kelemahan:
Anda tidak dapat dengan mudah menambah ciri -ciri baru.
anda tidak dapat dengan mudah mengehadkan set ciri.
PostCSS lebih mudah dikonfigurasikan.
Pasang POSTCSS
PostCSS boleh digunakan dengan Webpack, Parcel, Gulp.js, dan alat binaan lain, tetapi tutorial ini menunjukkan cara menjalankannya dari baris arahan.
seperti projek sampel, postcss dan pluginnya dipasang secara tempatan. Ini adalah pilihan praktikal jika projek anda mungkin mempunyai keperluan penyusunan yang berbeza.
Nota: PostCSS hanya boleh dijalankan dari fail JavaScript, tetapi modul PostCSS-CLI menyediakan pembungkus yang boleh dipanggil dari baris arahan. Modul POSTCSS-SCSS membolehkan PostCSS membaca fail .SCSS tetapi tidak menukarnya.
AutoPrefixer menggunakan BrowsersList untuk menentukan awalan vendor mana yang diperlukan berdasarkan senarai pelayar yang anda sokong. Cara paling mudah adalah untuk menentukannya sebagai array "Browserslist" dalam Package.json. Contoh berikut menambah awalan vendor apabila mana -mana penyemak imbas mempunyai sekurang -kurangnya 2% daripada bahagian pasaran:
<code>npm run css:dev</code>
anda biasanya akan mempunyai satu fail SASS .SCSS yang mengimport semua fail separa/komponen yang diperlukan. Contohnya:
<code>npm run css:watch</code>
Perintah ini:
<code>npm run css:build</code>
analisis./src/scss/main.scss
Buat fail konfigurasi postcss
Fail konfigurasi PostCSS adalah fail modul JavaScript bernama Postcss.config.js, biasanya disimpan dalam direktori akar projek (atau apa sahaja direktori yang anda jalankan dari Postcss). Modul mesti mengeksport fungsi tunggal:
Ia melewati objek CFG dengan sifat yang ditetapkan oleh arahan POSTCSS. Contohnya:
<code>npm install -g sass</code>
anda boleh menyemak sifat -sifat ini dan bertindak balas dengan sewajarnya - sebagai contoh, untuk menentukan sama ada anda sedang berjalan dalam mod pembangunan dan sama ada anda memproses fail input .SCSS:
<code>sass [input.scss] [output.css]</code>
Fungsi mesti mengembalikan objek yang nama hartanya sepadan dengan pilihan baris perintah PostCSS-CLI. Fail konfigurasi berikut menyalin arahan permulaan cepat yang digunakan di atas:
<code>npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer</code>
anda kini boleh menjalankan postcss dengan arahan yang lebih pendek:
<code>"browserslist": [ "> 2%" ],</code>
Berikut adalah beberapa perkara yang perlu diperhatikan:
<code>// 根Sass文件 // src/scss/main.scss @import '_variables'; @import '_reset'; @import 'components/_card'; // 等。</code>
-Verbose adalah pilihan: ia tidak ditetapkan dalam postcss.config.js.
<code>npm run css:dev</code>
Bahagian berikut menyediakan beberapa contoh plugin PostCSS yang boleh menghuraikan sintaks .SCSS Tambahan atau menyediakan fungsi pemprosesan di luar skop pengkompil SASS.
Token reka bentuk adalah cara bebas teknologi untuk menyimpan pembolehubah seperti fon, warna, jarak, dll. Anda boleh menyimpan pasangan nilai nama token dalam fail JSON:
<code>npm run css:watch</code>
kemudian rujuk mereka dalam mana -mana web, Windows, MacOS, iOS, Linux, Android, atau aplikasi lain.
SASS tidak secara langsung menyokong token reka bentuk, tetapi objek JavaScript dengan atribut pembolehubah (yang memegang pasangan nilai nama) boleh diserahkan kepada plugin postcss yang sedia ada PostCSS:
<code>npm run css:build</code>
Plugin menukarkan semua nilai ke dalam pembolehubah SASS $ global yang boleh digunakan di mana -mana bahagian. Nilai sandaran boleh ditetapkan untuk memastikan bahawa pembolehubah tersedia walaupun ia hilang dalam token. Contohnya:
<code>npm install -g sass</code>
Dalam Projek Contoh, fail Token.json ditakrifkan, yang dimuatkan dan digunakan semasa menjalankan NPM Run CSS: Dev.
<code>sass [input.scss] [output.css]</code>
tambah sokongan peta sass
Contoh berikut mentakrifkan titik break query media sebagai peta sass dan menggunakan respons mixin untuk mendapatkan nilai bernama:
Ciri -ciri lalai dan pengubahsuaian pertanyaan media kemudiannya boleh ditakrifkan dalam pemilih yang sama. Contohnya:
<code>npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer</code>
disusun ke CSS:
<code>"browserslist": [ "> 2%" ],</code>
Plugin Postcss-Map-Get menambah pemprosesan peta sass. Pasangnya dengan arahan berikut:
<code>// 根Sass文件 // src/scss/main.scss @import '_variables'; @import '_reset'; @import 'components/_card'; // 等。</code>
kemudian tambahkannya ke postcss.config.js:
<code>npx postcss ./src/scss/main.scss \
--output ./build/css/main.css \
--env development \
--map \
--verbose \
--parser postcss-scss \
--use postcss-advanced-variables postcss-nested autoprefixer</code>tambah pengoptimuman pertanyaan media
<code>// postcss.config.js
module.exports = cfg => {
// ... 配置 ...
};</code>boleh digabungkan ke dalam:
<code>{
cwd: '/home/name/postcss-demo',
env: 'development',
options: {
map: undefined,
parser: undefined,
syntax: undefined,
stringifier: undefined
},
file: {
dirname: '/home/name/postcss-demo/src/scss',
basename: 'main.scss',
extname: '.scss'
}
}</code>Ini tidak mungkin dalam SASS, tetapi boleh dilaksanakan menggunakan plugin PostCSS PostCSS-Sort-Media-Queries. Pasangnya dengan arahan berikut:
<code>// postcss.config.js
module.exports = cfg => {
const
dev = cfg.env === 'development',
scss = cfg.file.extname === '.scss';
// ... 配置 ...
};</code>kemudian tambahkannya ke postcss.config.js:
<code>// postcss.config.js
module.exports = cfg => {
const
dev = cfg.env === 'development',
scss = cfg.file.extname === '.scss';
return {
map: dev ? { inline: false } : false,
parser: scss ? 'postcss-scss' : false,
plugins: [
require('postcss-advanced-variables')(),
require('postcss-nested')(),
require('autoprefixer')()
]
};
};</code>Tambah pemprosesan aset
<code>npx postcss ./src/scss/main.scss \
--output ./build/css/main.css \
--env development \
--verbose</code>
<code>npx postcss src/scss/main.scss \
--output build/css/main.css \
--env development \
--verbose \
--config ./config/</code>
<code>{
"font-size": "16px",
"font-main": "Roboto, Oxygen-Sans, Ubuntu, sans-serif",
"lineheight": 1.5,
"font-code": "Menlo, Consolas, Monaco, monospace",
"lineheight-code": 1.2,
"color-back": "#f5f5f5",
"color-fore": "#444"
}</code>
<code>// PostCSS配置
module.exports = cfg => {
// 将令牌导入为Sass变量
const variables = require('./tokens.json'); // 新的
const
dev = cfg.env === 'development',
scss = cfg.file.extname === '.scss';
return {
map: dev ? { inline: false } : false,
parser: scss ? 'postcss-scss' : false,
plugins: [
require('postcss-advanced-variables')({ variables }), // 已更新
require('postcss-nested')(),
require('autoprefixer')()
]
};
};</code>
kemudian tambahkannya ke postcss.config.js. Dalam kes ini, pemampatan hanya akan dilakukan jika node_env ditetapkan kepada apa -apa selain pembangunan: tetapan --Env ke pemampatan pencetus pengeluaran (dan menghilangkan peta sumber): Dalam Projek Contoh, pengeluaran CSS boleh disusun dengan menjalankan NPM Run CSS: Build. POSTCSS adalah alat yang kuat dan boleh dikonfigurasikan yang boleh menyusun fail .scss dan meningkatkan (atau membatasi) bahasa SASS standard. Jika anda sudah menggunakan PostCSS untuk AutoPrefixer, anda boleh mengeluarkan sepenuhnya pengkompil SASS semasa mengekalkan sintaks kegemaran anda. lebih banyak pautan:
<code>// 如果tokens.json中未设置“color-back”值，则将默认背景颜色设置为#FFF
$color-back: #fff !default;</code>
<code>npm run css:dev</code>
<code>npm run css:watch</code>
berhijrah ke postcss?
Rujukan Bahasa SASS
soalan yang sering ditanya mengenai postcss
Apa itu Postcss? POSTCSS adalah alat untuk menukar gaya menggunakan plugin JavaScript. Ia biasanya digunakan dalam pembangunan web dan menggunakan pelbagai plugin untuk mengendalikan CSS untuk meningkatkan dan memperluaskan fungsi CSS standard.
Atas ialah kandungan terperinci Cara menggunakan postcss sebagai alternatif yang boleh dikonfigurasikan untuk sass. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk menyelesaikan ralat pengecam mysql yang tidak sah
arahan penutupan berjadual linux
Apakah yang dimaksudkan dengan lebar penuh dan separuh lebar?
Bagaimana untuk memasang chatgpt pada telefon bimbit
Apa itu e-mel
Penyelesaian kepada sambungan gagal antara wsus dan pelayan Microsoft
Apakah antara muka audio?
Perbezaan antara vscode dan visual studio
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
