更便捷的css处理方式-postcss

更便捷的css处理方式-PostCSS

通常来讲介绍一个东西都是要从是什么，怎么用的顺序来说。我感受这样很容易让你们失去兴趣，先看一下postcss能作点什么，有兴趣的话再往下看，不然可能没有耐心看下去。让咱们开始吧

postcss能作什么

补全css属性浏览器前缀

手写的代码能够是这样的:

.div{
    display: flex;
}

postcss能够转换以后成了这样:

.div{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

检查css语法

body{
    color: #f0;
    }

会有如下提示:

src/er.css
 2:12  ✖  Unexpected invalid hex color "#f0"   color-no-invalid-hex



[18:27:28] 'css-lint' errored after 98 ms
[18:27:28] Error in plugin 'gulp-stylelint'
Message:
    Failed with 1 error

拥抱下个版本规范的css 即css4

对于下个规范的css而言，变量，方法等功能的都会增长上去，你能够这样来定义一个变量：

:root { 
    --red: #d33;
  }
  a { 
      color: var(--red);
  }

固然直接在现有浏览器上是跑不通的，就正如es2015刚开始同样，咱们须要一个转化器来将其转成当前可用规范。postcss的插件就能够作到。

a{
    color:#d33
}

除了上面以外还有其余不少功能，postcss及其插件都能提供。

什么是postcss

如今让咱们回到最基本的问题，postcss是什么。
援引官网的定义，一种使用js来转化css的工具(A tool for transforming CSS with JavaScript)。其实咱们更多的时候提到postcss是有两个含义的：

1. postcss自己，也就是咱们npm install时的安装部分
   
2. 基于postCss的丰富插件系统。
   上文那些功能，都是基于postcss的插件提供的功能。

postcss自己并不直接用于处理样式，只有配合它的插件，才能完成相关的编译工做。

postcss不是预编译语言的替代品

我想你脑海里一直在复现两个名词，less/sass，开始的时候我也同样，认为postcss跟两者同样是一种css预编译语言或者起到相似做用的一种语言。postcss不是要取代哪个，更多的是提供的一种补充，彻底能够是互补的概念。
做为一个是使用js将css转化为AST而后进行处理的工具，彻底不是预处理语言的替代品，postcss处理的必须是css文件，因此彻底能够和预编译语言结合，使用预编译语言转化为css以后而后进行处理。
我一直认为二者不是互斥的关系，彻底能够互补使用。

为何须要postcss

你们可能有这么个疑问既然二者不互相冲突，目前我使用less/sass 也很容易知足个人需求，为何要使用新的东西呢。我认为主要缘由是其提供的丰富的插件功能，能够工做更加的简单化，便捷化，一句话，你只须要编写基本的css，其余的功能交给postcss就好。作了简单的对比可能更加清晰明了。

实现给css属性加上浏览器前缀的功能

对比一下less和postcss的实现：

一、 对于less而言，确定是写一个方法

.flex-block() {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.test{
    .flex-block()
}

二、使用postcss

.test{
    display: flex;
}

只须要编译的时候使用autoprefixer处理就好。
可能一个属性的效果不是特别明显，要是有不少个属性须要处理呢?

.flex-block() {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.transform(){
    //仅仅是举例子
}
.ccc(){
}
.test{
    .flex-block()
    .transform()
    .ccc()
}

这时候postcss仍是只须要以下:

.test{
    display: flex;
    transform:rotate(7deg);
}

这时候就能看出来postcss的便捷性了，我一直认为能够抽象公共化的东西彻底没有必要去重复的去手动开发。

postcss工做原理

postcss自己是一个node模块，能够将css文件解析为抽象语法树(AST)，将该树在多个插件方法传递，而后将AST转换为字符串返回，该字符串能够输出到目标文件中。传递过程当中的插件能够选择是否改变该语法树，上诉改变能够经过sourcemap来记录。以下面的流程所示(借用w3cplus的一张图)：

其实这里咱们更应该关联起来的是babel，看一下功能：

• 将将来规范的转化为当前规范的转义器
• 实现相同，都是将源文件解析为AST而后经由插件处理。
• 丰富的插件，知足不一样的需求
• 支持自定义插件的开发

当前工做流中引入postcss

你们可能会有这种想法，又是一种新的工具，我当前的开发框架中岂不是要大动。其实这种担忧是不必的。postcss是很容易引入当前的工做流中的。不管是webpack仍是gulp，都有比较方便的方式。官方有详细的介绍文档

结束语

原先很早就看到postCss，当时太年轻认为是less的一种替代品罢了，因此一直没有去关注。了解以后感受真的不错，至于如何使用这里就不去演示了，有兴趣的能够查看下个人简单示例但愿更多的人使用。

参考文章

http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/
http://julian.io/some-things-you-may-think-about-postcss-and-you-might-be-wrong/