[官方解釋]：
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
借助JavaScript瘫俊，PostCSS自身只包括以下4中能力：
? css分析器
? css節(jié)點(diǎn)樹API
? source map生成器
? css節(jié)點(diǎn)樹拼接器
關(guān)鍵介紹：
其實(shí)毫蚓，postcss目前已經(jīng)超過200+的插件沪悲，她幾乎可以完成你所有和 CSS 相關(guān)的工作（包括 Sass 和 Less 這些預(yù)處理器的工作）洗鸵，極大的提高你處理 CSS 的效率越锈。
有些插件可以讓你使用未來的語法，允許你使用諸如顏色函數(shù)膘滨，徑向漸變，自定義屬性稀拐，自定義選擇器火邓，為媒體查詢自定義別名以及許多其他的功能。還有一些顏色管理的插件，用來把顏色從一種格式轉(zhuǎn)換到另一種格式铲咨，修改顏色的 alpha 透明度躲胳，合成顏色等。
你目前開發(fā)的項目纤勒，不論你是用css坯苹，sass，less等格式來寫摇天，你都能使用postcss粹湃，而且不會相互影響。使用了postcss之后泉坐，你會發(fā)現(xiàn)为鳄，你只要維護(hù)一個（postcss）版本。
PostCSS 的插件是用 JavaScript 寫的腕让，只要你有想法孤钦，有一定的 JS 基礎(chǔ)，你就可以把你的想法用插件的形式實(shí)現(xiàn)出來纯丸。你不需要安裝Ruby環(huán)境偏形。而且和構(gòu)建工具無縫集成。
那么構(gòu)建工具webpack如何配置postcss觉鼻？
從官方文檔中一句話中知道:
The Autoprefixer PostCSS plugin is one of the most popular CSS processors.
那么我們現(xiàn)在以autoprefixer為例俊扭，把postcss的autoprefixer配置到webpack中。
直接把配置文件的源代碼發(fā)此處
'use strict';
const path = require('path');
const srcPath = path.join(__dirname, '/../src');
const dfltPort = 8000;
function getDefaultModules() {
return {
preLoaders: [{
test: /\.(js|jsx)$/,
include: srcPath,
loader: 'eslint-loader'
}],
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader!postcss-loader'
},
{
test: /\.sass/,
loader: 'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded&indentedSyntax'
},
{
test: /\.scss/,
loader: 'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded'
},
{
test: /\.less/,
loader: 'style-loader!css-loader!postcss-loader!less-loader'
},
{
test: /\.styl/,
loader: 'style-loader!css-loader!postcss-loader!stylus-loader'
},
{
test: /\.(png|jpg|gif|woff|woff2)$/,
loader: 'url-loader?limit=8192'
},
{
test: /\.(mp4|ogg|svg)$/,
loader: 'file-loader'
}
]
};
}
module.exports = {
srcPath: srcPath,
publicPath: '/assets/',
port: dfltPort,
getDefaultModules: getDefaultModules,
postcss: function () {
return [
require('autoprefixer')({
browsers: ['last 2 versions', 'ie >= 8']
})
];
}
};
如何開發(fā)postcss插件呢滑凉？
其實(shí)開發(fā)插件之前统扳，你肯定會想到api吧。那么postcss Api畅姊，非常詳細(xì)的插件開發(fā)流程咒钟。
這里提供一個鏈接“快點(diǎn)我”，你可以直接在此嘗試postcss強(qiáng)大的插件功能若未。
當(dāng)然朱嘴，做任何事情都得有原則，有規(guī)范粗合，postcss插件開發(fā)也不例外萍嬉。
- 不重復(fù)開發(fā)已有插件能力
- 插件功能單一
- 實(shí)現(xiàn)插件的邏輯時，盡可能使用異步流程隙疚，如：Promise, Generator, Async-await
結(jié)束語：
說了這么多壤追，你對postcss了解了嗎？
還不趕緊試試~
詳情請點(diǎn)擊官方鏈接
如果你覺得通過這篇文章供屉，你知道了postcss是什么行冰，怎么玩了溺蕉，請幫忙點(diǎn)個贊。如果有哪里說的不對的地方悼做，請留下貴大神指出哦疯特。
