PostCSS

@AnnTseng

什么是PostCSS 

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

1、工具 —— 将 CSS 解析成抽象语法树(AST)的 Node.js 模块，向所有“插件”方法传递这棵AST，然后再将AST转换成为一个字符串，可将其输出为一个文件。

2、插件系统 —— 变量、混入、预处理器、后处理器……都是插件之一。

Grunt配置

1、安装PostCSS版本的Grunt插件 grunt-postcss

2、引入插件
  

Gulp配置

1、安装gulp-postcss插件

2、引入插件
  

语法

PreCSS 插件包 Try

Text

Text

Precss与Sass语法的差异

一些插件

1、Autoprefixer  --- 根据caniuse 数据以及指定的浏览器版本列表，自动给代码加上浏览器前缀。        Try

2、cssnext  ---  css未来语法 Try

3、cssnano  ---  插件包，执行优化，删除空白和注释，并且压缩代码

cssnano优化包括下面一些类型：

    - 删除空格和最后一个分号

    - 删除注释

    - 优化字体权重

    - 丢弃重复的样式规则

    - 优化calc()

    - 压缩选择器

    - 减少手写属性

    - 合并规则

插件开发(AST)

Demo

优势

使用 CSS 语法

编译速度快

可定制自己的预处理器、创建自己的插件

模块化

缺点

规范问题

现有项目转换成本