1、PostCSS是什么
它可以被理解為一個平台，可以讓一些插件在上面跑
它提供了一個解析器，可以將CSS解析成抽象語法樹
通過PostCSS這個平台，我們能夠開發一些插件，來處理CSS。熱門插件如autoprefixer
安裝
npm install -g postcss-cli //全局安裝postcss npm install -g autoprefixer //全局安裝autoprefixer
//找到項目，本地安裝 npm install postcss --save-dev npm install autoprefixer --save-dev
2、能解決什么問題
/* CSS3 box-shadow */
@mixin box-shadow($top, $left, $blur, $size, $color, $inset: false) {
@if $inset {
-webkit-box-shadow: inset $top $left $blur $size $color;
box-shadow: inset $top $left $blur $size $color;
} @else {
-webkit-box-shadow: $top $left $blur $size $color;
box-shadow: $top $left $blur $size $color;
}
}
既然我們已經有SASS了，為什么還要PostCSS呢？
它的存在自有獨到之處：
根據上述代碼可以看到，我們用SASS來寫代碼，需要自己做瀏覽器兼容
而利用PostCSS，我們按照最簡潔最慣用的寫法就可以了：
box-shadow: 0 0 3px 5px rgba(222, 222, 222, .3);
autoprefixer 插件會幫我們做好兼容處理
再次說明了PostCSS是一個平台，允許強大的插件在它上面跑，簡化編程。PostCSS實際上改變了一種編程模式
3、怎么實現與LESS 、SASS、Stylus相同的功能
已經強調過，PostCSS只是一個跑插件的平台，而LESS 、SASS是程序式CSS預處理語言。它們並不是一樣的東西，但卻可以實現相似的效果，所以常被一起比較
毫無疑問，PostCSS用插件實現和LESS 、SASS、Stylus相同的功能。
4、PostCSS由哪些東西組成？
從官方介紹來看，只包含以下內容：
-
CSS Parser
-
CSS 節點樹 API
-
source map 生成器
-
生成節點樹串
5、在gulp中使用PostCSS
首先在你的項目中創建兩個文件夾，一個命名為 src ，另一個命名為 dest 。src 文件夾用來放置未處理的CSS文件，而 dest 用來放置PostCSS插件處理后的文件。
順便回顧一下gulp使用方法：
1、cd 進入項目文件 2、npm init 生成package.json 3、npm install gulp --save-dev 本地安裝gulp(為了用插件） 4、npm install gulp-postcss --save-dev 安裝插件 5、編寫gulpfile.js文件 6、gulp 任務名 //運行任務
第4步之前，需要手動修改一下package.json文件：
{
"name": "testPostCSS",
"version": "0.0.1",
"description": "test PostCSS gulp plugin",
"keywords": [
"gulpplugin",
"PostCSS",
"css"
],
"author": "dll",
"license": "MIT",
"dependencies": {
"postcss": "^5.0.0",
"gulp": "~3.8.10"
},
"devDependencies": {
"gulp-postcss": "^6.0.1"
}
}
在 src 目錄中創建一個測試文件 style.css ，並在這個文件中添加一些CSS的測試代碼：
編寫gulpfile.js文件時把新生成文件路徑設置為dest;gulp taskname 執行任務，會得到一個新css文件
gulpfile.js文件這樣寫：
var gulp = require('gulp');
var postcss = require('gulp-postcss');
gulp.task('css', function () {
var processors = [
];
return gulp.src('./src/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});
然鵝，新舊文件並沒有什么不同，哈哈哈！！那是因為我們還沒用postcss插件。
前面已經說過，postcss的作用相當於一個跑插件的平台，現在當然沒效果咯。
接下來我們添加postcss插件,還是以Autoprefixer (處理瀏覽器私有前綴)為例：
1、
npm install autoprefixer --save-dev //本地安裝，將插件安裝到項目
2、在gulpfile.js中添加相應代碼：
var autoprefixer = require('autoprefixer');
var processors = [autoprefixer];//在processors中添加插件名，可以添加多個插件
3、給測試文件style.css添加測試代碼：
.autoprefixer {
display: flex;
}
4、執行gulp任務，得到編譯好的文件，你會發現，新生成的css文件中自動為display加了瀏覽器私有前綴。
大功告成！！