.config/coc/extensions/node_modules/coc-prettier/node_modules/postcss/README-cn.md

   1 # PostCSS [![Gitter][chat-img]][chat]
   2
   3 <img align="right" width="95" height="95"
   4      alt="哲学家的石头 - PostCSS 的 logo"
   5      src="http://postcss.github.io/postcss/logo.svg">
   6
   7 [chat-img]: https://img.shields.io/badge/Gitter-Join_the_PostCSS_chat-brightgreen.svg
   8 [chat]:     https://gitter.im/postcss/postcss
   9
  10 PostCSS 是一个允许使用 JS 插件转换样式的工具。
  11 这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins，
  12 编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。
  13
  14 PostCSS 在工业界被广泛地应用，其中不乏很多有名的行业领导者，如：维基百科，Twitter，阿里巴巴，
  15 JetBrains。PostCSS 的 [Autoprefixer] 插件是最流行的 CSS 处理工具之一。
  16
  17 PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个[抽象语法树]的方式）。在这之后，这个 API 便可被许多[插件]利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。
  18
  19 **Twitter 账号:** [@postcss](https://twitter.com/postcss)<br>
  20 **支持 / 讨论:**   [Gitter](https://gitter.im/postcss/postcss)<br>
  21
  22 如果需要 PostCSS 商业支持（如咨询，提升公司的前端文化，
  23 PostCSS 插件），请联系 [Evil Martians](https://evilmartians.com/?utm_source=postcss)
  24 邮箱 <surrender@evilmartians.com>。
  25
  26 [抽象语法树]:     https://zh.wikipedia.org/wiki/%E6%8A%BD%E8%B1%A1%E8%AA%9E%E6%B3%95%E6%A8%B9
  27 [Autoprefixer]: https://github.com/postcss/autoprefixer
  28 [插件]:          https://github.com/postcss/postcss/blob/master/README-cn.md#%E6%8F%92%E4%BB%B6
  29
  30 <a href="https://evilmartians.com/?utm_source=postcss">
  31   <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
  32        alt="由 Evil Martians 赞助" width="236" height="54">
  33 </a>
  34
  35 ## 插件
  36
  37 截止到目前，PostCSS 有 200 多个插件。你可以在 [插件列表] 或 [搜索目录] 找到它们。
  38 下方的列表是我们最喜欢的插件 - 它们很好地演示了我们可以用 PostCSS 做些什么。
  39
  40 如果你有任何新的想法，[开发 PostCSS 插件] 非常简单易上手。
  41
  42 [搜索目录]: http://postcss.parts
  43 [插件列表]: https://github.com/postcss/postcss/blob/master/docs/plugins.md
  44
  45 ### 解决全局 CSS 的问题
  46
  47 * [`postcss-use`] 允许你在 CSS 里明确地设置 PostCSS 插件，并且只在当前文件执行它们。
  48 * [`postcss-modules`] 和 [`react-css-modules`] 可以自动以组件为单位隔绝 CSS 选择器。
  49 * [`postcss-autoreset`] 是全局样式重置的又一个选择，它更适用于分离的组件。
  50 * [`postcss-initial`] 添加了 `all: initial` 的支持，重置了所有继承的样式。
  51 * [`cq-prolyfill`] 添加了容器查询的支持，允许添加响应于父元素宽度的样式.
  52
  53 ### 提前使用先进的 CSS 特性
  54
  55 * [`autoprefixer`] 添加了 vendor 浏览器前缀，它使用 Can I Use 上面的数据。
  56 * [`postcss-preset-env`] 允许你使用未来的 CSS 特性。
  57
  58 ### 更佳的 CSS 可读性
  59
  60 * [`precss`] 囊括了许多插件来支持类似 Sass 的特性，比如 CSS 变量，套嵌，mixins 等。
  61 * [`postcss-sorting`] 给规则的内容以及@规则排序。
  62 * [`postcss-utilities`] 囊括了最常用的简写方式和书写帮助。
  63 * [`short`] 添加并拓展了大量的缩写属性。
  64
  65 ### 图片和字体
  66
  67 * [`postcss-assets`] 可以插入图片尺寸和内联文件。
  68 * [`postcss-sprites`] 能生成雪碧图。
  69 * [`font-magician`] 生成所有在 CSS 里需要的 `@font-face` 规则。
  70 * [`postcss-inline-svg`] 允许你内联 SVG 并定制它的样式。
  71 * [`postcss-write-svg`] 允许你在 CSS 里写简单的 SVG。
  72
  73 ### 提示器（Linters）
  74
  75 * [`stylelint`] 是一个模块化的样式提示器。
  76 * [`stylefmt`] 是一个能根据 `stylelint` 规则自动优化 CSS 格式的工具。
  77 * [`doiuse`] 提示 CSS 的浏览器支持性，使用的数据来自于 Can I Use。
  78 * [`colorguard`] 帮助你保持一个始终如一的调色板。
  79
  80 ### 其它
  81
  82 * [`postcss-rtl`] 在单个 CSS 文件里组合了两个方向（左到右，右到左）的样式。
  83 * [`cssnano`] 是一个模块化的 CSS 压缩器。
  84 * [`lost`] 是一个功能强大的 `calc()` 栅格系统。
  85 * [`rtlcss`] 镜像翻转 CSS 样式，适用于 right-to-left 的应用场景。
  86
  87 [`postcss-inline-svg`]:         https://github.com/TrySound/postcss-inline-svg
  88 [`postcss-preset-env`]:         https://github.com/jonathantneal/postcss-preset-env
  89 [`react-css-modules`]:          https://github.com/gajus/react-css-modules
  90 [`postcss-autoreset`]:          https://github.com/maximkoretskiy/postcss-autoreset
  91 [`postcss-write-svg`]:          https://github.com/jonathantneal/postcss-write-svg
  92 [`postcss-utilities`]:          https://github.com/ismamz/postcss-utilities
  93 [`postcss-initial`]:            https://github.com/maximkoretskiy/postcss-initial
  94 [`postcss-sprites`]:            https://github.com/2createStudio/postcss-sprites
  95 [`postcss-modules`]:            https://github.com/outpunk/postcss-modules
  96 [`postcss-sorting`]:            https://github.com/hudochenkov/postcss-sorting
  97 [`postcss-assets`]:             https://github.com/assetsjs/postcss-assets
  98 [开发 PostCSS 插件]:             https://github.com/postcss/postcss/blob/master/docs/writing-a-plugin.md
  99 [`font-magician`]:              https://github.com/jonathantneal/postcss-font-magician
 100 [`autoprefixer`]:               https://github.com/postcss/autoprefixer
 101 [`cq-prolyfill`]:               https://github.com/ausi/cq-prolyfill
 102 [`postcss-rtl`]:                https://github.com/vkalinichev/postcss-rtl
 103 [`postcss-use`]:                https://github.com/postcss/postcss-use
 104 [`css-modules`]:                https://github.com/css-modules/css-modules
 105 [`colorguard`]:                 https://github.com/SlexAxton/css-colorguard
 106 [`stylelint`]:                  https://github.com/stylelint/stylelint
 107 [`stylefmt`]:                   https://github.com/morishitter/stylefmt
 108 [`cssnano`]:                    http://cssnano.co
 109 [`precss`]:                     https://github.com/jonathantneal/precss
 110 [`doiuse`]:                     https://github.com/anandthakker/doiuse
 111 [`rtlcss`]:                     https://github.com/MohammadYounes/rtlcss
 112 [`short`]:                      https://github.com/jonathantneal/postcss-short
 113 [`lost`]:                       https://github.com/peterramsing/lost
 114
 115 ## 语法
 116
 117 PostCSS 可以转化样式到任意语法，不仅仅是 CSS。
 118 如果还没有支持你最喜欢的语法，你可以编写一个解释器以及（或者）一个 stringifier 来拓展 PostCSS。
 119
 120 * [`sugarss`] 是一个以缩进为基础的语法，类似于 Sass 和 Stylus。
 121 * [`postcss-syntax`] 通过文件扩展名自动切换语法。
 122 * [`postcss-html`] 解析类 HTML 文件里`<style>`标签中的样式。
 123 * [`postcss-markdown`] 解析 Markdown 文件里代码块中的样式。
 124 * [`postcss-jsx`] 解析源文件里模板或对象字面量中的CSS。
 125 * [`postcss-styled`] 解析源文件里模板字面量中的CSS。
 126 * [`postcss-scss`] 允许你使用 SCSS *(但并没有将 SCSS 编译到 CSS)*。
 127 * [`postcss-sass`] 允许你使用 Sass *(但并没有将 Sass 编译到 CSS)*。
 128 * [`postcss-less`] 允许你使用 Less *(但并没有将 LESS 编译到 CSS)*。
 129 * [`postcss-less-engine`] 允许你使用 Less *(并且使用真正的 Less.js 把 LESS 编译到 CSS)*。
 130 * [`postcss-js`] 允许你在 JS 里编写样式，或者转换成 React 的内联样式／Radium／JSS。
 131 * [`postcss-safe-parser`] 查找并修复 CSS 语法错误。
 132 * [`midas`] 将 CSS 字符串转化成高亮的 HTML。
 133
 134 [`postcss-less-engine`]: https://github.com/Crunch/postcss-less
 135 [`postcss-safe-parser`]: https://github.com/postcss/postcss-safe-parser
 136 [`postcss-syntax`]:      https://github.com/gucong3000/postcss-syntax
 137 [`postcss-html`]:        https://github.com/gucong3000/postcss-html
 138 [`postcss-markdown`]:    https://github.com/gucong3000/postcss-markdown
 139 [`postcss-jsx`]:         https://github.com/gucong3000/postcss-jsx
 140 [`postcss-styled`]:      https://github.com/gucong3000/postcss-styled
 141 [`postcss-scss`]:        https://github.com/postcss/postcss-scss
 142 [`postcss-sass`]:        https://github.com/AleshaOleg/postcss-sass
 143 [`postcss-less`]:        https://github.com/webschik/postcss-less
 144 [`postcss-js`]:          https://github.com/postcss/postcss-js
 145 [`sugarss`]:             https://github.com/postcss/sugarss
 146 [`midas`]:               https://github.com/ben-eb/midas
 147
 148 ## 文章
 149
 150 * [一些你对 PostCSS 可能产生的误解](http://julian.io/some-things-you-may-think-about-postcss-and-you-might-be-wrong)
 151 * [PostCSS 究竟是什么，是做什么的](http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss)
 152 * [PostCSS 指南](http://webdesign.tutsplus.com/series/postcss-deep-dive--cms-889)
 153
 154 你可以在 [awesome-postcss](https://github.com/jjaderg/awesome-postcss) 列表里找到更多优秀的文章和视频。
 155
 156 ## 书籍
 157
 158 * Alex Libby, Packt 的 [网页设计之精通 PostCSS](https://www.packtpub.com/web-development/mastering-postcss-web-design) (2016年6月)
 159
 160 ## 使用方法
 161
 162 你可以通过简单的两步便开始使用 PostCSS：
 163
 164 1. 在你的构建工具中查找并添加 PostCSS 拓展。
 165 2. [选择插件]并将它们添加到你的 PostCSS 处理队列中。
 166
 167 [选择插件]: http://postcss.parts
 168
 169 ### Webpack
 170
 171 在 `webpack.config.js` 里使用 [`postcss-loader`] :
 172
 173 ```js
 174 module.exports = {
 175     module: {
 176         rules: [
 177             {
 178                 test: /\.css$/,
 179                 exclude: /node_modules/,
 180                 use: [
 181                     {
 182                         loader: 'style-loader',
 183                     },
 184                     {
 185                         loader: 'css-loader',
 186                         options: {
 187                             importLoaders: 1,
 188                         }
 189                     },
 190                     {
 191                         loader: 'postcss-loader'
 192                     }
 193                 ]
 194             }
 195         ]
 196     }
 197 }
 198 ```
 199
 200 然后创建 `postcss.config.js`:
 201
 202 ```js
 203 module.exports = {
 204     plugins: [
 205         require('precss'),
 206         require('autoprefixer')
 207     ]
 208 }
 209 ```
 210
 211 [`postcss-loader`]: https://github.com/postcss/postcss-loader
 212
 213 ### Gulp
 214
 215 使用 [`gulp-postcss`] 和 [`gulp-sourcemaps`].
 216
 217 ```js
 218 gulp.task('css', function () {
 219     var postcss    = require('gulp-postcss');
 220     var sourcemaps = require('gulp-sourcemaps');
 221
 222     return gulp.src('src/**/*.css')
 223         .pipe( sourcemaps.init() )
 224         .pipe( postcss([ require('precss'), require('autoprefixer') ]) )
 225         .pipe( sourcemaps.write('.') )
 226         .pipe( gulp.dest('build/') );
 227 });
 228 ```
 229
 230 [`gulp-sourcemaps`]: https://github.com/floridoo/gulp-sourcemaps
 231 [`gulp-postcss`]:    https://github.com/postcss/gulp-postcss
 232
 233 ### npm run / CLI
 234
 235 如果需要在你的命令行界面或 npm 脚本里使用 PostCSS，你可以使用 [`postcss-cli`]。
 236
 237 ```sh
 238 postcss --use autoprefixer -c options.json -o main.css css/*.css
 239 ```
 240
 241 [`postcss-cli`]: https://github.com/postcss/postcss-cli
 242
 243 ### 浏览器
 244
 245 如果你想编译浏览器里的 CSS 字符串（例如像 CodePen 一样的在线编辑器），
 246 只需使用 [Browserify] 或  [webpack]。它们会把 PostCSS 和插件文件打包进一个独立文件。
 247
 248 如果想要在 React 内联样式／JSS／Radium／其它 [CSS-in-JS] 里使用 PostCSS，
 249 你可以用 [`postcss-js`] 然后转换样式对象。
 250
 251 ```js
 252 var postcss  = require('postcss-js');
 253 var prefixer = postcss.sync([ require('autoprefixer') ]);
 254
 255 prefixer({ display: 'flex' }); //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }
 256 ```
 257
 258 [`postcss-js`]: https://github.com/postcss/postcss-js
 259 [Browserify]:   http://browserify.org/
 260 [CSS-in-JS]:    https://github.com/MicheleBertoli/css-in-js
 261 [webpack]:      https://webpack.github.io/
 262
 263 ### 运行器
 264
 265 * **Grunt**: [`grunt-postcss`](https://github.com/nDmitry/grunt-postcss)
 266 * **HTML**: [`posthtml-postcss`](https://github.com/posthtml/posthtml-postcss)
 267 * **Stylus**: [`poststylus`](https://github.com/seaneking/poststylus)
 268 * **Rollup**: [`rollup-plugin-postcss`](https://github.com/egoist/rollup-plugin-postcss)
 269 * **Brunch**: [`postcss-brunch`](https://github.com/brunch/postcss-brunch)
 270 * **Broccoli**: [`broccoli-postcss`](https://github.com/jeffjewiss/broccoli-postcss)
 271 * **Meteor**: [`postcss`](https://atmospherejs.com/juliancwirko/postcss)
 272 * **ENB**: [`enb-postcss`](https://github.com/awinogradov/enb-postcss)
 273 * **Taskr**: [`taskr-postcss`](https://github.com/lukeed/taskr/tree/master/packages/postcss)
 274 * **Start**: [`start-postcss`](https://github.com/start-runner/postcss)
 275 * **Connect/Express**: [`postcss-middleware`](https://github.com/jedmao/postcss-middleware)
 276
 277 ### JS API
 278
 279 对于其它的应用环境，你可以使用 JS API：
 280
 281 ```js
 282 const fs = require('fs');
 283 const postcss = require('postcss');
 284 const precss = require('precss');
 285 const autoprefixer = require('autoprefixer');
 286
 287 fs.readFile('src/app.css', (err, css) => {
 288     postcss([precss, autoprefixer])
 289         .process(css, { from: 'src/app.css', to: 'dest/app.css' })
 290         .then(result => {
 291             fs.writeFile('dest/app.css', result.css);
 292             if ( result.map ) fs.writeFile('dest/app.css.map', result.map);
 293         });
 294 });
 295 ```
 296
 297 阅读 [PostCSS API 文档] 获取更多有关 JS API 的信息.
 298
 299 所有的 PostCSS 运行器应当通过 [PostCSS 运行器指南]。
 300
 301 [PostCSS 运行器指南]: https://github.com/postcss/postcss/blob/master/docs/guidelines/runner.md
 302 [PostCSS API 文档]:  http://api.postcss.org/postcss.html
 303
 304 ### 配置选项
 305
 306 绝大多数 PostCSS 运行器接受两个参数：
 307
 308 * 一个包含所需插件的数组
 309 * 一个配置选项的对象
 310
 311 常见的选项：
 312
 313 * `syntax`: 一个提供了语法解释器和 stringifier 的对象。
 314 * `parser`: 一个特殊的语法解释器（例如 [SCSS]）。
 315 * `stringifier`: 一个特殊的语法 output 生成器（例如 [Midas]）。
 316 * `map`: [source map 选项].
 317 * `from`: input 文件名称（大多数运行器自动设置了这个）。
 318 * `to`: output 文件名称（大多数运行器自动设置了这个）。
 319
 320 [source map 选项]: https://github.com/postcss/postcss/blob/master/docs/source-maps.md
 321 [Midas]:          https://github.com/ben-eb/midas
 322 [SCSS]:           https://github.com/postcss/postcss-scss
 323
 324 ### Atom
 325
 326 * [`language-postcss`] 添加了 PostCSS 和 [SugarSS] 代码高亮。
 327 * [`source-preview-postcss`] 在一个独立窗口里实时预览生成的 CSS。
 328
 329 [SugarSS]: https://github.com/postcss/sugarss
 330
 331 ### Sublime Text
 332
 333 * [`Syntax-highlighting-for-PostCSS`] 添加了 PostCSS 代码高亮。
 334
 335 [`Syntax-highlighting-for-PostCSS`]: https://github.com/hudochenkov/Syntax-highlighting-for-PostCSS
 336 [`source-preview-postcss`]:          https://atom.io/packages/source-preview-postcss
 337 [`language-postcss`]:                https://atom.io/packages/language-postcss
 338
 339 ### Vim
 340
 341 * [`postcss.vim`] 添加了 PostCSS 代码高亮。
 342
 343 [`postcss.vim`]: https://github.com/stephenway/postcss.vim
 344
 345 ### WebStorm
 346
 347 自 WebStorm 2016.3 开始，[提供了] 内建的 PostCSS 支持。
 348
 349 [提供了]: https://blog.jetbrains.com/webstorm/2016/08/webstorm-2016-3-early-access-preview/