展望未来：使用PostCss和cssnext书写css

作者：Mark Goodyear

原文链接：A look into writing future CSS with PostCSS and cssnext

像twitter，google，bbc使用的一样，我打算看一看使用PostCSS处理的css的世界。

PostCSS是什么？

PostCSS是使用javascript插件转换css的后处理器。PostCSS本身不会对你的css做任何事情，你需要安装一些plugins才能开始工作。这不仅使其模块化，同时功能也会更强。

它的工作原理就是解析css并将其转换成一个css的节点树，这可以通过javascript来控制（也就是插件发挥作用）。然后返回修改后的树并保存。它与Sass（一种预处理器）的工作原理不同，你基本上是用一种不同的语言来编译css。

预处理和后处理到底是什么？

为了用简单的方式解释预处理和后处理的不同，我将以单位转换为例。当书写Sass时，我们可以用函数将 px 转换成 rem

/* input */
.selector { margin-bottom: rem(20px); }

/* output, assuming base font size is 1rem */
.selector { margin-bottom: 1.25rem; }

这种方式节省了我们手工计算的的时间。不过通过PostCSS，我们能够做的更好。因为是后处理的缘故，我们不需要任何函数来编译CSS。我们可以直接书写px，它可以自动地转换成rem。

/* input */
.selector { margin-bottom: 20px; }

/* output, assuming base font size is 1rem */
.selector { margin-bottom: 1.25rem; }

PostCSS会在每一个px值出现并运行计算之前处理声明，将其转换成rem的值。注意：因为PostCSS模块化的本质，你需要使用postcss-pxtorem才能完成转换。

使用cssnext书写未来的css

我们可以在样式表中利用cssnext额外增加的一些css规范。cssnext是一个PostCSS的包，其中包含了大量的特性组件，比如custom properties 和custom selectors:

/* custom properties */
:root {
  --heading-color: #ff0000;
}

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

/* usage */
:--headings {
  color: var(--heading-color);
}

通过cssnext，上述代码会被处理成以下内容

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