PostCSS v5.2.12官方版 附使用教程

PostCSS是什么呢？PostCSS可以直观理解为一个平台，为用户提供一个解析器，可以将CSS解析成抽象语法树，可以通过“插件”来传递AST，然后再把AST转换成一个串，最后再输出到目标文件中去。

PostCSS基本介绍

PostCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。

PostCSS 已经被许多大公司使用：谷歌，推特，阿里巴巴和 Shopify。 Autoprefixer PostCSS 插件是最流行的 CSS 处理器插件之一。

PostCSS 可以作为预处理器使用，类似：Sass, Less 和 Stylus。但是 PostCSS 是模块化的工具，比之前那些快3-30 倍，而且功能更强大。

PostCSS 包括 CSS 解析器，CSS 节点树 API，一个源映射生成器和一个节点树 stringifier。

软件功能

1、增强代码的可读性

利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。

2、将未来的 CSS 特性带到今天!

PostCSS Preset Env 帮你将现代 CSS 语法转换成大多数浏览器都能理解的东西，根据你的目标浏览器或运行时环境来确定你需要的 polyfills，基于 cssdb 实现。

3、终结全局 CSS

CSS 模块 就是说你永远不用担心命名太大众化而造成冲突太普通，只要用最有意义的名字就行了。

4、避免 CSS 代码中的错误

通过使用 stylelint 强化一致性约定并避免样式表中的错误，stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法，包括类似 CSS 的语法，例如 SCSS 。

5、强大的网格系统

LostGrid 利用 calc() 和你所定义的分割方式来创建网格系统，无需传递大量参数。

PostCSS使用教程

首先在CodePen在线编辑器上点击"NewPen"创建一个新的页面。然后单击CSS窗口左上角的小齿轮图标，在弹出的面板中设置。

单击“CSS Preprocessor”下拉选项，你可以选择下拉选项中的“PostCSS”选项。你也可以在"Vendor Prefixing"中选择“Autoprefixer”插件。

然后你可以点击“Need an add-on”按钮，在弹出的面板中选择你需要的插件。在弹出的面板将会显示@规则插件，复制粘贴这些@规则对应的PostCSS插件到你的CSS面板中，并且开始使用。

CodePen用法的例子

让多们看看如何在CodePen中使用PostCSS的插件cssnext示例。

在CSS面板顶部，添加你想要的cssnext插件代码：

@use cssnext;

有了这条代码，你将可以使用cssnext官网上描述的所有功能特性。比如，我们使用CSS的变量和函数给body设置一个background颜色。

首先，使用:root定义CSS变量。在CSS面板中添加像下面这样的代码：

:root {

--body_bg_color: black;

}

可以像下面的代码那样调用CSS的变量：

body {

background: var(--body_bg_color);

}

这个时候你应该看到了预览面板上的背景颜色变成了black。你也可以点击CSS面板右上角的"View Compiled"按钮看到生成的代码：

接下来，假设我们想让背景颜色不要是全黑色，想变亮一点。我们可以使用未来的语法修改颜色。

在上面声明的CSS变量中，修改--body_bg_color变量值，从black变成:

--body_bg_color: color(black lightness(20%));

这是一个lightness()函数，在black颜色上调20%的亮度，这个时候你可以看到背景颜色从黑色变成了深灰色。

可以在CodePen以这种方式使用任何支持的PostCSS插件：

通过@规则引入你想要的使用的PostCSS插件

根据插件的指令在CSS面板中使用(在上面你能找到对应插件使用说明的链接地址)

下面就是我们前面在CodePen中使用PostCSS得到的最终效果：

在Prepros中使用PostCSS

Prepros中可能没有像CodePen中那么多插件可使用，但它包括了Autoprefixer和cssnext插件，可以在Prepros面板中选中，从而激活对应的PostCSS插件。你可以点击这里下载Prepros。

打开Prepros面板，可以将项目拖到面板中，而且这个面板包括一个CSS文件。然后点击CSS文件，将会在右边打开一个设置面板。在这个面板中你可以看到Prepros支持的PostCSS插件，你可以选择你想用的PostCSS插件。比如说你选择Autoprefixer和cssnext表示你使用了PostCSS这两个插件。

如上图所示，你现在可以使用cssnext插件的所有功能以及Autoprefixed插件功能。

PostCSS组成内容

CSS Parser

CSS 节点树 API

source map 生成器

生成节点树串

更新内容

在 deprecation 消息中修复拼写错误