练习可以用 http://plnkr.co/ 感觉还挺好
原文 :https://github.com/postcss/postcss/blob/main/docs/README-cn.md

PostCSS

PostCSS 是一个允许使用 JS 插件转换样式的工具。
这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins，
编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。

PostCSS 在工业界被广泛地应用，其中不乏很多有名的行业领导者，如：维基百科，Twitter，阿里巴巴，
JetBrains。PostCSS 的 Autoprefixer 插件是最流行的 CSS 处理工具之一。

PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个抽象语法树的方式）。在这之后，这个 API 便可被许多插件利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。

Twitter 账号: @postcss

支持 / 讨论: Gitter

如果需要 PostCSS 商业支持（如咨询，提升公司的前端文化，
PostCSS 插件），请联系 Evil Martians
邮箱 surrender@evilmartians.com。

插件

截止到目前，PostCSS 有 200 多个插件。你可以在 插件列表 或 搜索目录 找到它们。
下方的列表是我们最喜欢的插件 - 它们很好地演示了我们可以用 PostCSS 做些什么。

如果你有任何新的想法，开发 PostCSS 插件 非常简单易上手。

解决全局 CSS 的问题

• postcss-use 允许你在 CSS 里明确地设置 PostCSS 插件，并且只在当前文件执行它们。
• postcss-modules 和 react-css-modules 可以自动以组件为单位隔绝 CSS 选择器。
• postcss-autoreset 是全局样式重置的又一个选择，它更适用于分离的组件。
• postcss-initial 添加了 all: initial 的支持，重置了所有继承的样式。
• cq-prolyfill 添加了容器查询的支持，允许添加响应于父元素宽度的样式.

提前使用先进的 CSS 特性

• autoprefixer 添加了 vendor 浏览器前缀，它使用 Can I Use 上面的数据。
• postcss-preset-env 允许你使用未来的 CSS 特性。

更佳的 CSS 可读性

• precss 囊括了许多插件来支持类似 Sass 的特性，比如 CSS 变量，套嵌，mixins 等。
• postcss-sorting 给规则的内容以及@规则排序。
• postcss-utilities 囊括了最常用的简写方式和书写帮助。
• short 添加并拓展了大量的缩写属性。

图片和字体

• postcss-assets 可以插入图片尺寸和内联文件。
• postcss-sprites 能生成雪碧图。
• font-magician 生成所有在 CSS 里需要的 @font-face 规则。
• postcss-inline-svg 允许你内联 SVG 并定制它的样式。
• postcss-write-svg 允许你在 CSS 里写简单的 SVG。

提示器（Linters）

• stylelint 是一个模块化的样式提示器。
• stylefmt 是一个能根据 stylelint 规则自动优化 CSS 格式的工具。
• doiuse 提示 CSS 的浏览器支持性，使用的数据来自于 Can I Use。
• colorguard 帮助你保持一个始终如一的调色板。

其它

• postcss-rtl 在单个 CSS 文件里组合了两个方向（左到右，右到左）的样式。
• cssnano 是一个模块化的 CSS 压缩器。
• lost 是一个功能强大的 calc() 栅格系统。
• rtlcss 镜像翻转 CSS 样式，适用于 right-to-left 的应用场景。

语法

PostCSS 可以转化样式到任意语法，不仅仅是 CSS。
如果还没有支持你最喜欢的语法，你可以编写一个解释器以及（或者）一个 stringifier 来拓展 PostCSS。

• sugarss 是一个以缩进为基础的语法，类似于 Sass 和 Stylus。
• postcss-syntax 通过文件扩展名自动切换语法。
• postcss-html 解析类 HTML 文件里<style>标签中的样式。
• postcss-markdown 解析 Markdown 文件里代码块中的样式。
• postcss-jsx 解析源文件里模板或对象字面量中的 CSS。
• postcss-styled 解析源文件里模板字面量中的 CSS。
• postcss-scss 允许你使用 SCSS _(但并没有将 SCSS 编译到 CSS)_。
• postcss-sass 允许你使用 Sass _(但并没有将 Sass 编译到 CSS)_。
• postcss-less 允许你使用 Less _(但并没有将 LESS 编译到 CSS)_。
• postcss-less-engine 允许你使用 Less _(并且使用真正的 Less.js 把 LESS 编译到 CSS)_。
• postcss-js 允许你在 JS 里编写样式，或者转换成 React 的内联样式／Radium／JSS。
• postcss-safe-parser 查找并修复 CSS 语法错误。
• midas 将 CSS 字符串转化成高亮的 HTML。

文章

• 一些你对 PostCSS 可能产生的误解
• PostCSS 究竟是什么，是做什么的
• PostCSS 指南

你可以在 awesome-postcss 列表里找到更多优秀的文章和视频。

书籍

• Alex Libby, Packt 的 网页设计之精通 PostCSS (2016 年 6 月)

使用方法

你可以通过简单的两步便开始使用 PostCSS：

1. 在你的构建工具中查找并添加 PostCSS 拓展。
2. 选择插件并将它们添加到你的 PostCSS 处理队列中。

Webpack

在 webpack.config.js 里使用 postcss-loader :

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: "postcss-loader",
          },
        ],
      },
    ],
  },
};

然后创建 postcss.config.js:

module.exports = {
  plugins: [require("precss"), require("autoprefixer")],
};

Gulp

使用 gulp-postcss 和 gulp-sourcemaps.

gulp.task("css", () => {
  const postcss = require("gulp-postcss");
  const sourcemaps = require("gulp-sourcemaps");

  return gulp
    .src("src/**/*.css")
    .pipe(sourcemaps.init())
    .pipe(postcss([require("precss"), require("autoprefixer")]))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("build/"));
});

npm run / CLI

如果需要在你的命令行界面或 npm 脚本里使用 PostCSS，你可以使用 postcss-cli。

postcss --use autoprefixer -c options.json -o main.css css/*.css

浏览器

如果你想编译浏览器里的 CSS 字符串（例如像 CodePen 一样的在线编辑器），
只需使用 Browserify 或 webpack。它们会把 PostCSS 和插件文件打包进一个独立文件。

如果想要在 React 内联样式／JSS／Radium／其它 CSS-in-JS 里使用 PostCSS，
你可以用 postcss-js 然后转换样式对象。

var postcss = require("postcss-js");
var prefixer = postcss.sync([require("autoprefixer")]);

prefixer({ display: "flex" }); //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }

运行器

• Grunt: grunt-postcss
• HTML: posthtml-postcss
• Stylus: poststylus
• Rollup: rollup-plugin-postcss
• Brunch: postcss-brunch
• Broccoli: broccoli-postcss
• Meteor: postcss
• ENB: enb-postcss
• Taskr: taskr-postcss
• Start: start-postcss
• Connect/Express: postcss-middleware

JS API

对于其它的应用环境，你可以使用 JS API：

const autoprefixer = require("autoprefixer");
const postcss = require("postcss");
const precss = require("precss");
const fs = require("fs");

fs.readFile("src/app.css", (err, css) => {
  postcss([precss, autoprefixer])
    .process(css, { from: "src/app.css", to: "dest/app.css" })
    .then((result) => {
      fs.writeFile("dest/app.css", result.css);
      if (result.map) fs.writeFile("dest/app.css.map", result.map);
    });
});

阅读 PostCSS API 文档 获取更多有关 JS API 的信息.

所有的 PostCSS 运行器应当通过 PostCSS 运行器指南。

配置选项

绝大多数 PostCSS 运行器接受两个参数：

• 一个包含所需插件的数组
• 一个配置选项的对象

常见的选项：

• syntax: 一个提供了语法解释器和 stringifier 的对象。
• parser: 一个特殊的语法解释器（例如 SCSS）。
• stringifier: 一个特殊的语法 output 生成器（例如 Midas）。
• map: source map 选项.
• from: input 文件名称（大多数运行器自动设置了这个）。
• to: output 文件名称（大多数运行器自动设置了这个）。

Atom

• language-postcss 添加了 PostCSS 和 SugarSS 代码高亮。
• source-preview-postcss 在一个独立窗口里实时预览生成的 CSS。

Sublime Text

• Syntax-highlighting-for-PostCSS 添加了 PostCSS 代码高亮。

Vim

• postcss.vim 添加了 PostCSS 代码高亮。

WebStorm

自 WebStorm 2016.3 开始，提供了 内建的 PostCSS 支持。