【翻译】PostCSS简介

许多开发人员花时间在使用CSS的预处理器上如less,sass和stylus。这些工具已经成为Web开发的重要组成部分。写一个网站的样式，不使用嵌套，变量或混入等功能不多见。它们每一个都是很是实用的，让咱们退后一步看，考虑以这种方式使用预处理器是否是最好的办法。
传统的预处理器的问题：
不能扩展。不管您选择哪一种预处理，都被限制到设定的，它提供的功能。若是您须要在其上构建功能，在构建过程当中,你须要添加一个单独的步骤。若是你想写一个扩展，只能针对你本身的。
不能剔除任何功能。有些预处理器提供诸如sass的@extend 功能，能够完全不使用它们。当你不使用它们，却没法删除该工具的这个功能，减小代码的体积。
本身的CSS标准。每一个预处理器已经有了本身的标准。但并非W3C标准，这意味着它们不会被新的W3C标准兼容。

下面要介绍的PostCSS，就是解决以上问题的工具。
什么是PostCSS？
PostCSS不是预处理器; 它不改变CSS。它自己并不完成css工做。它的做用是提供一个CSS解析器和建立能够分析，测试，处理资源，优化，建立回调，和传输给其它解析CSS框架的插件的框架。PostCSS把CSS解析成抽象语法树（AST），经过一系列的插件，而后从新编译成一个字符串。若是你熟悉JavaScript工具，那么能够把PostCSS类比为CSS的Babel。目前有超过200个PostCSS插件，其中有许多在的PostCSS GitHub的页上列出，而另外一些能够在PostCSS 的postcss.parts目录中找到。PostCSS能够集成在大多数构建工具，包括gulp，grunt，WebPack或NPM。那么，如何用PostCSS解决咱们前面列出的问题？

• 每一个插件单独安装。选择须要插件以及顺序应用。一般状况下，插件可使用另一些设置选项进行配置。

• 您能够编写本身的插件。每一个插件PostCSS接收解析CSS做为输入参数，分析或修改它，并以一样的方式返回。这意味着，插件不须要处理解析CSS和转换回成一个字符串。所以很容易构建本身的插件。

• PostCSS能够用来写出符合W3C的CSS。有不少插件，旨在实现新的W3C规范功能。这将使你写一个标准的对将来版本兼容的css代码。

怎样使用PostCSS
安装PostCSS，咱们不会进入太多有关设置的细节。咱们会在命令行直接运行PostCSS。你能够在在Github的页面上找到各构建工具中如何使用PostCSS工具的详细信息。
安装PostCSS
PostCSS经过node与npm安装，请确保已经在开始前安装了node。把PostCSS安装在全局，代码以下：

npm install -g postcss-cli

运行下面代码，查看是否安装上：

postcss --help

在屏幕会给你打出postcss接受的参数列表。也能够参照postcss-CLI documenation。
运行PostCSS
PostCSS安装成功，下面作一个小DEMO。建立styles.css文件，并添加一些CSS样式。例如，定义一个Flexbox的容器：

.container  { 
  display: flex
 }

Flexbox须要浏览器前缀才能在对应的浏览器上运行。若是不想手动维护，Autoprefixer是PostCSS插件，完成自动维护的工做。它会基于can i use所提供的信息,自动添加供应商前缀。下面将先放你如何使用Autoprefixer维护浏览器前缀。
安装Autoprefixer，运行下面命令：

npm install -g autoprefixer

接下来，切换到项目文件夹，建立一个DIST文件夹，并把处理好的css放到里面：

mkdir dist

而后运行PostCSS：

postcss -u autoprefixer styles.css -d dist

上面命令的意思是：运行Autoprefixer 处理styles.css并输出到DIST / styles.css。如今，打开DIST / Styles.css中会看到全部须要的浏览器前缀的css都已经加上：

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;}

运行PostCSS -w标识，会启动一个watcher监听进程，当styles.css的文件被修改，则会自动处理。
插件配置咱们能够根据须要来配置Autoprefixer的浏览器前缀。经过设置browsers选项来完成。当经过命令行运行PostCSS，插件配置须要在.json文件中定义，例如，postcss.json。让咱们在当前文件夹中建立文件，并配置Autoprefixer支持的浏览器的最新的2个版本。

{
  "autoprefixer": {
    "browsers": ["last 2 versions"]
  }}

如今能够从新运行PostCSS并根据新的配置文件监听：

postcss styles.css -u autoprefixer -c postcss.json -d dist -w

启用source map
source map是用于调试编译CSS必不可少的。PostCSS能够生成输出文件内联source map，经过设置--map选项（或-m标识）。
更多postcss插件
PostCSS有一个惊人的插件库，包括测试，质量检查，回退，老的浏览器支持，内联资源,雪碧图生成，优化，新的语法支持，以及将来的CSS特性。正如前面提到的，你能够在插件的结构目录postcss.parts中找到。
作一个demo，使用几个插件，展现一下PostCSS的做用。
CSS变量的自定义属性插件
postcss-custom-properties插件的做用，实现对支持W3C自定义属性规范（又名本地变量）。在选择器的自定义属性为任意值，并在样式表其余地方引用。
这和less,sass中变量的功能相同：存放值和消除代码重复。主要的区别是，做用域是有点不一样; 相似于常规属性，CSS自定义属性沿元素级联传播，而不是块级范围。
下面是这个插件如何工做的一个例子。代码：

:root {
  --container-width: 800px;}

.container {
  width: var(--container-width);}

将编译为：

.container {
  width: 800px;}

自定义选择器插件
postcss-custom-selectors插件实现了自定义选择器规范。能够预先定义选择器，并在后面引用它们。例如，咱们能够保存全部标题的一个选择器，并从新使用它做为一个变量：

@custom-selector :--headings h1, h2, h3, h4, h5, h6;

:--headings {
  color: mediumblue;}

这将编译以下：

h1,
h2,
h3,
h4,
h5,
h6 {
  color: mediumblue;}

俄罗斯样式表插件
曾经想学习俄语，但写CSS太忙？不用担忧，如今能够用俄罗斯语写CSS啦！只需使用俄语样式插件。以下：

h1 { 
  размер-шрифта :  20 пикселей ; 
  цвет : красный ; 
  цвет-фона : белый ; 
  вес-шрифта : жирный ; }

它被翻译成：

h1 {
  font-size: 20px;
  color: red;
  background-color: white;
  font-weight: bold;}

嗯......我历来没有说过全部的插件都是有用的！
结束语
less和sass预处理器是伟大的。很大程度改善了咱们的开发过程。但如今，停下来，从新思考之后的开发，这些工具是否仍是最好的选择。
咱们不仅是须要新的功能来写样式，咱们还须要模块化，更多的新标准，以及灵活的构建进程。PostCSS也是这样作的，它可能会使CSS世界的游戏规则改变。
原文：An Introduction to PostCSS
原文连接：http://www.sitepoint.com/an-introduction-to-postcss/?utm_source=sitepoint&utm_medium=relatedinline&utm_term=html-css&utm_campaign=relatedauthor