關(guān)于PostCSS的一點(diǎn)小科普_html/css_WEB-ITnose

PostCSS 起源于2013年9月，發(fā)展到現(xiàn)在，已經(jīng)有很多開發(fā)者在工作中使用它。 如果你尚未接觸過PostCSS，這篇文章正適合你。

PostCSS是一個(gè)使用JavaScript插件來轉(zhuǎn)換CSS的工具。

PostCSS 本身很小，其只包含CSS解析器，操作CSS節(jié)點(diǎn)樹的API，資源生成器（譯者注1：原文是source map），以及一個(gè)節(jié)點(diǎn)樹字符串化工具。所有的黑魔法都是通過利用插件實(shí)現(xiàn)的。

截止目前，PostCSS 的生態(tài)圈內(nèi)已經(jīng)擁有超過100種插件。這些插件可以做太多的事情，比如lint（譯者注2：一種用來檢測CSS代碼的工具），添加vendor prefixes（譯者注3：添加瀏覽器內(nèi)核前綴，可以使用瀏覽器的一些獨(dú)有特性），允許使用最新的CSS特性，在你的CSS里提供統(tǒng)計(jì)數(shù)據(jù)，或者是允許你使用 Sass，Less 或是 Stylus 等 CSS 預(yù)處理器。

讓我們看看以下十種插件

Autoprefixer

根據(jù)用戶的使用場景來解析CSS和添加vendor prefixes（前文注2）。

PostCSS Focus

一種利用鍵盤操作為每個(gè):hover添加:focus選擇器的PostCSS插件。

PreCSS

一個(gè)允許你在代碼中使用類似Sass標(biāo)記的插件。

Stylelint

一種強(qiáng)大的，先進(jìn)的可以使你在CSS樣式中保持一致性，避免錯(cuò)誤的CSS linter工具。

PostCSS CSS Variables

一種將用戶自定義CSS變量CSS variables）轉(zhuǎn)化為靜態(tài)樣式的插件。

PostCSS Flexbugs Fixes

一種用于修復(fù)flexbug的bug的插件。

PostCSS CSSnext

一種可以讓你使用CSS最新特性的插件。它通過將最新的CSS特性轉(zhuǎn)變?yōu)楝F(xiàn)階段瀏覽器所兼容的特性，這樣你不用再等待瀏覽器對某一特定新特性的支持。

PostCSS CSS Stats

一種支持cssstats的插件。這個(gè)插件將會返回一個(gè)cssstatus 對象，這樣你可以使用它來進(jìn)行CSS分析。

PostCSS SVGO

優(yōu)化在PostCSS中內(nèi)聯(lián)SVG。

PostCSS Style Guide

一種可以自動生成風(fēng)格指導(dǎo)的插件。將會在Markdown中生成CSS注釋，并在生成的HTML文檔中顯示。

如果你想編寫自己的插件，并希望將其貢獻(xiàn)給社區(qū)的話，請確保你是先看過guidelines這篇文檔還有PostCSS Plugin Boilerplate這篇官方文檔。

在你的工作中使用PostCSS

PostCSS 是用JavaScript所編寫的，這使得我們在Grunt，Gulp 或 Webpack等常用的前端構(gòu)建工具中使用它變得非常方便。

下面是我們使用 Autoprefixer 插件的示例。

npm install autoprefixer --save-dev

Gulp如果你使用Gulp，那么你需要安裝gulp-postcss 。

npm install --save-dev gulp-postcss

gulp.task('autoprefixer', function () { var postcss = require('gulp-postcss'); var autoprefixer = require('autoprefixer'); return gulp.src('./src/*.css') .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ])) .pipe(gulp.dest('./dest'));});

Grunt如果你使用Grunt，那么你需要安裝grunt-postcss 。

npm install grunt-postcss --save-dev

module.exports = function(grunt) { grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ postcss: { options: { map: true, processors: [ require('autoprefixer')({ browsers: ['last 2 versions'] }) ] }, dist: { src: 'css/*.css' } } }); grunt.registerTask('default', ['postcss:dist']);};

Webpack如果你使用Webpack，那么你需要安裝 postcss-loader 。

npm install postcss-loader --save-dev

var autoprefixer = require('autoprefixer');module.exports = { module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" } ] }, postcss: function () { return [autoprefixer]; }}

關(guān)于怎么整合PostCSS，你可以從這里 PostCSS repo獲取到幫助。

最后最后的誠心安利~

在有些時(shí)候，在新技術(shù)，新工具，新框架發(fā)布的時(shí)候，去使用并觀察其發(fā)展趨勢無疑是一種明智的行為。 現(xiàn)在，PostCSS 已經(jīng)發(fā)展到一個(gè)相當(dāng)成熟的階段，我強(qiáng)烈建議你在你的工作中使用它。 因?yàn)樗F(xiàn)在已經(jīng)在工程中被廣泛的使用，同時(shí)在未來一段時(shí)間內(nèi)它不會發(fā)生太大的變化。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com