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 消息中修复拼写错误