[转] Postcss

相关前言

image.png

目前，在工程化开发中，使用最多的应该就是Less、Sass和Stylus。首先，还是介绍一下它们吧。它们有个统一的名字——css预处理器。何为CSS预处理器？

css预处理器给出了非常可行的解决方案：

变量：就像其他编程语言一样，免于多处修改。

Sass：使用「$」对变量进行声明，变量名和变量值使用冒号进行分割
Less：使用「@」对变量进行声明

Sass：它的方式是三者中最差的，不存在全局变量的概念
Less：它的方式和js比较相似，逐级往上查找变量
Stylus：它的方式和Less比较相似，但是它和Sass一样更倾向于指令式查找
嵌套：对于css来说，有嵌套的写法无疑是完美的，更像是父子层级之间明确关系

三者在这处的处理都是一样的，使用「&」表示父元素

介绍

PostCSS是一个利用JS插件来对CSS进行转换的工具，这些插件非常强大，强大到无所不能。其中，Autoprefixer就是众多PostCSS插件中最流行的一个。

截至目前（2017年7月）PostCSS已经有超过200个插件，你可以插件列表查找有没有你所需要的插件。如果你想自己写个插件，据说这是一个不错的主意，而且非常简单（前提掌握node.js，不过我还没学会呢），你可以试着搞点事。

为什么使用 Postcss

现如今各种插件和工具多的数不胜数，比如gulp、grunt、webpack，less、scss等也都有对应其工具的相应插件，还有合并、压缩、浏览器自动刷新等实用插件，那Postcss存在的意义是什么呢？

模块化？！如果你的项目用的webpack或者是gulp，那么相应的要安装一堆处理各种文件的插件。Postcss可以说就是将你项目中所有处理css的插件进行了一个二次封装，让你基于Postcss这个平台来完成，用Postcss它独有的一套体系来处理项目中的css文件。也就是说如果你的项目中想使用Postcss，想感受Postcss的独特魅力，那么less、scss、clean-css等处理css的插件全部替换成Postcss其独特的插件就行了。

它还有一些特性，例如创建了一个插件功能极强的生态系统，具有模块化需要什么用什么（precss就是一个集成了类似SASS很多方法的包），相比其他的CSS预处理器它的优势主要体现在以下几个方面：

1. 拥有极高的处理性能（3倍以上的处理速度）
2. 你既可以写正常的CSS，也可以结合LESS或者SASS一起编写
3. 对Source Map支持更好
4. 他的插件真的太多太强大太便利了

PostCSS安装及使用

PostCSS一般是结合自动化工具使用，如果要单独使用可以安装PostCSS CLI

因为我用的是webpack，这里介绍一下webpack的使用

npm i  postcss-loader autoprefixer --save-dev

webpack.config.js 文件

    module: {
        rules: [ 
            {
                test: /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            },
        ]
    },

postcss.config.js 配置文件

module.exports = {
    plugins: [
        require('autoprefixer')   //最常用的postcss插件，自动补全css浏览器前缀
    ]
}

autoprefixer 插件

那么好，知道了Postcss是个什么鬼，来认识一下最出名(最实用)的插件autoprefixer

autoprefixer是让你可以偷懒的神器，如果你的项目是PC端的，并且产品大大或者项目经理大大要你兼容IE8~9，是不是很头疼。别怕，用了autoprefixer，写正常的标准css就好了，autoprefixer会自动帮你添加浏览器前缀的，哈哈。

Postcss还有许多功能，压缩合并它都可以，只要你感兴趣，完全可以运用到项目当中（不建议，当然如果你愿意折腾，请随意）。