初识PostCss

Less和Sass主要是解决了一个模块化的问题，但是还有一个全局的样式的污染问题。我今天个人分享的就是关于PostCss的一些个人理解。

PostCss

PostCss是Autoprefixer的开发者Andrey Sitnik开发的，它最初是一个通过JavaScript来处理CSS 的方法。

可以理解为一种插件系统（类似于css领域的webpack），它本身只是一个API，作为一个API它可以创建任何需要的插件和工具。

PostCss有两个概念：pre-processor（预处理器）和post-processor（后处理器）。

像Sass、Less和Stylus都是属于预处理器的范畴，按照预处理器的语法来写css的代码，最后交由预处理器的编译器编译成一个传统的css，这个就叫做预处理器。
post-processor（后处理器）就是我们把css代码写完之后，交由它去处理，添加一些必要的属性，比如比较典型的：CSS Prefixer，会加上一些浏览器的前缀。

官方定义

PostCSS is a tool for transformimg CSS with JS plugins.
These plugins can support variables and mixins,transpile future CSS syntax,inline images,and more.

翻译过来的意思就是说呢，PostCSS是一个用JS插件转换css的工具。这些插件可以支持变量和混合，转换成未来的css语法，内联图像等。我们可以把PostCss理解成一个管道，然后在管道各处可以放一些插件，然后从管道经过的css都会经过插件的处理。实际上PostCss它将css代码转换成抽象的一个语法结构AST，就是一个对象的一个树，然后方便插件处理。

PostCss定位和使用

PostCss是一个插件系统，所以它既不是预处理器也不是后处理器，类似于css领域的webpack、Grunt和Gulp进行集成。它的作用就是整合预处理器和后处理器。

关于PostCss的使用，一般是不单独使用的，与已有的构建工具集合；比如webpack、Grunt和Gulp。
最广泛的PostCss使用是与webpack集成。

与webpack集成

1 搭建环境

• 得到一个package.json文件

  npm init
  

  1560754641265.png

• 安装webpack依赖包

  npm install webpack webpack-cli  --save-dev
  

  --save表示会把依赖保存在package.json的文件里面来，然后-dev就会保存到devDependencies里面。

  注意：”script“：{“bulid”："webpack --config webpack.config.js"}意 思就是说在运行webpack，--config表示指定配置文件，webpack.config.js 配置文件名。

• 配置webpack.config.js

  
  
  1560751.png
  
  
  1560752.png

• 打包index.js

  npm run build
  

• 分离css

  因为要查看PostCss打包的一个效果，所以分离css是一定需要的。

  需要安装的插件：

  npm install css-loader --save-dev
  npm install extract-text-webpack-plugin@next --save-dev
  npm install postcss-loader --save-dev
  

PostCss 常见插件介绍

• autoprefixer

  自动添加浏览器前缀，这个插件是根据can i use解析css并且为其添加浏览器厂商前缀的PostCss插件。

  caniuse（https://www.caniuse.com ）是一个网站，我们可以在这个网站里面知道我们所使用的一个属性的浏览器的支持情况。

  npm install autoprefixer --save-dev
  

  安装之后添加到webpack.config.js下面的loader里面

• stylelint

  强制开发人员按照团队css规范来写css样式的工具，类似的eslint（JS的规范）。

  npm install stylelint stylelint-config-lost stylelint-config-standard --save-dev
  

  它是一个强大的，现代的linter，可以帮助您避免错误并在您的样式中强制执行约定。 为什么是强大的呢？

  因为它的特征：

  • 了解最新的CSS语法，包括自定义属性和4级选择器

  • 从HTML，markdown和CSS-in-JS对象和模板文字中提取嵌入式样式

  • 解析类似CSS的语法，如SCSS，Sass，Less和SugarSS

  • 拥有超过170条内置规则来捕获错误，应用限制并强制执行风格约定

  • 支持插件，因此您可以创建自己的规则或使用社区编写的插件

  • 自动修复一些违规行为（实验性功能）

  • 是很好的测试超过10000的单元测试

  • 支持可共享的配置，您可以扩展或创建自己的配置

  • 被unopinionated这样你就可以定制棉短绒您的确切需求

  • 有一个不断增长的社区，[Facebook]，[GitHub]和[WordPress使用]

  关于它更多的介绍可以通过（https://stylelint.io/ ）官网了解一下。

• postcss-cssnext（https://cssnext.github.io/ ）

  npm install postcss-cssnext --save-dev
  

• postcss-modules

  以模块化方式实现Css, 重点在于解决了样式冲突

  npm install postcss-modules --save-dev
  

• lost

  强大的PostCSS网格系统

  npm install lost --save-dev
  

文章主要介绍了PostCss的定位，结合webpack介绍了PostCss主要的几个插件：autoprefixer、postcss-cssnext、postcss-modules、lost、stylelint。文章可能存在很多不足，阅读的小伙伴们看到了可以稍作提示或者哪里有错误的可以私信告诉我纠正过来，O(∩_∩)O谢谢。