PostCSS是什么？PostCSS详细使用教程

PostCSS是什么？最近再搜的一个词，那么具体PostCSS是什么？应该怎么使用呢？跟着小编的教程一起来看看吧！

PostCSS基本介绍

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

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

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

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

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插件功能。