postcss的理解

2018-07-04 本文已影响0人飞到心头的小鸟

前言

最近在项目开发中听同事提起postcss，然后就去网上看了些关于这方面的文章，看的也是眼花缭乱，什么让css像js一样操作，让css更灵活之类的，所以通过这篇文章我也从学习的角度来理解postcss。

postcss是一种插件系统，是基于js插件去转换css的一个工具，是js可以操作的一种数据形式。通俗点说它就是一个平台，就是通过这个平台可以开发一些我们自己的插件来处理css。

安装postcss

全局安装 npm install -g postcss-cli

本地安装 npm install postcss --save-dev

PostCSS 提供了一个解析器，它能够将 CSS 解析成抽象语法树（AST）。

官方给出的介绍：

1. CSS Parser 解析器

2. CSS 节点数 API

3. source map 生成器

4. 生成节点树串

在我们实际开发中，经常会有一些困扰，比如项目过大，我们的样式缺乏模块化的概念，全局变量经常被同名问题困扰，当定义class类多的时候经常不知起什么名字好。

这些年随着sass、less等预处理器的流行，让css写起来轻松了很多。

postcss同样可以实现sass、less一样的功能，虽然他们不是一样的东西，但是可以实现一样的效果，只是postcss是通过插件去实现的。

当然，它不只是为了像sass、less一样，不然还开发它做咩咧，哈哈。

1. 它能够为css提供额外的功能；

2. 通过在postcss这个平台上，我们能够开发一些插件，来处理我们的css，比如：autoprefixer

3. 能够使用javaScript来开发插件，就是完全使用js编写；

插件基于css代码的AST（语法树）所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的css规范的样式规则转译成当前的css规范支持的格式，它的强大之处就在于其不断发展的插件体系。

postcss的主要功能有两个：第一个就是前面提到的把css解析成javaScript可以操作的AST，第二个就是调用插件来处理AST并得到结果。因此不能简单的把postcss归类成css预处理或者后处理工具。

postcss一般不单独使用，而是与已有的构建工具进行集成。比如Webpack、Grunt和Gulp都可以进行集成。完成集成后，选择满足功能需求的postcss插件并进行配置。

具体使用请参考postcss使用方法

本文是对自己学习的一个记录，其中用了个别大神博客的话，如有侵权，联系必删！