postcss是一个新的工具，它使得开发转换样式的JavaScript插件变得很容易。这为新插件打开了一个新的可能性世界，使其更容易与CSS一起工作。这篇文章介绍了两个最流行的PostCSS插件：css Next和cssnano。
- css Next允许您使用今天的css的未来。您可以使用即将推出的功能或并非所有浏览器都支持的功能，如css variables和css COLOR function. css Next** 将对您的样式进行转换，使其可以在所有浏览器中运行。换句话说，css Next允许您使用实际的css语法编写样式，而不是使用不同的预处理器语法。** css Next** 还会自动为您的样式添加供应商前缀，因此在编写您的css时不需要自己使用前缀。
举个例子，让我们假设我们有以下的css样式：
1:root {
2 --text: hotpink;
3 --bg-color: #F9EC31;
4 --flex-center: {
5 display: flex;
6 margin: auto;
7 }
8}
9
10.box {
11 background-color: var(--bg-color);
12 color: color(hotpink whiteness(25%));
13 @apply(--flex-center);
14}
15
16.warn {
17 @apply(--flex-center);
18}
cssNext 会将样式转换为：
1.box {
2 background-color: #F9EC31;
3 color: rgb(255, 64, 159);
4 display: -webkit-box;
5 display: -ms-flexbox;
6 display: flex;
7 margin: auto;
8}
9
10.warn {
11 display: -webkit-box;
12 display: -ms-flexbox;
13 display: flex;
14 margin: auto;
15}
- CSSNANO会缩小和压缩您的css。它删除了空格，消除了重复的规则，删除了过时的供应商前缀，删除了注释，并执行了许多其他优化。
可以根据您的特定需求配置css next和cssnano，但在这里我们只展示如何使用缺省值。这将有望涵盖您的大多数用例。
在这个例子中，我们还将使用PostCSS-CLI，但是如果更适合您的工作流程，您也可以将PostCSS与Webpack或Grunt一起使用。
安装postcss、postcss-cli、cssNext&cssnano
通过NPM安装带有css Next和cssnano插件的PostCSS：
1$ npm install --save-dev postcss postcss-cli postcss-cssnext cssnano
或通过Yarn：
1$ yarn add postcss postcss-cli postcss-cssnext cssnano --dev
使用PostCSS-CLI
您可以通过提供输入和输出文件以及要使用的postcss插件(S)来使用postcss命令行界面。使用--USE标志指定插件，使用--OUPUT标志指定输出文件，最后提供不带任何标志的输入文件：
1$ postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css
您还可以在监视模式下使用PostCSS CLI，以便它侦听对输入文件的更改：
1$ postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css --watch
您还可以在json配置文件中指定更多细粒度的配置选项，并使用--config标志指定配置文件：
1$ postcss --config postcss-config.json
你的配置文件看起来像这样：
1{
2 "use": ["postcss-cssnext", "cssnano"],
3 "input": "styles.css",
4 "output": "styles-out.css"
5}
NPM脚本
要简化您的工作流程，只需在项目的Package.json文件中设置一个postcss脚本：
1"scripts": {
2 "postcss": "postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css"
3}
现在，您需要做的就是运行以下命令：
1$ npm run postcss