關于PostCSS的一點小科普_html/css_WEB-ITnose

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

PostCSS是一個使用JavaScript插件來轉換CSS的工具。

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

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

讓我們看看以下十種插件

Autoprefixer

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

PostCSS Focus

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

PreCSS

一個允許你在代碼中使用類似Sass標記的插件。

Stylelint

一種強大的，先進的可以使你在CSS樣式中保持一致性，避免錯誤的CSS linter工具。

PostCSS CSS Variables

一種將用戶自定義CSS變量CSS variables）轉化為靜態樣式的插件。

PostCSS Flexbugs Fixes

一種用于修復flexbug的bug的插件。

PostCSS CSSnext

一種可以讓你使用CSS最新特性的插件。它通過將最新的CSS特性轉變為現階段瀏覽器所兼容的特性，這樣你不用再等待瀏覽器對某一特定新特性的支持。

PostCSS CSS Stats

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

PostCSS SVGO

優化在PostCSS中內聯SVG。

PostCSS Style Guide

一種可以自動生成風格指導的插件。將會在Markdown中生成CSS注釋，并在生成的HTML文檔中顯示。

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

在你的工作中使用PostCSS

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

下面是我們使用 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]; }}

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

最后最后的誠心安利~

在有些時候，在新技術，新工具，新框架發布的時候，去使用并觀察其發展趨勢無疑是一種明智的行為。 現在，PostCSS 已經發展到一個相當成熟的階段，我強烈建議你在你的工作中使用它。 因為它現在已經在工程中被廣泛的使用，同時在未來一段時間內它不會發生太大的變化。

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