背景

由于项目中的使用，又想深入了解，想着写一篇博客，以此监督自我学习 ~

那么首先，让我们带着几个问题来了解一下，PostCSS

• PostCSS 是什么
• PostCSS 有什么用
• 如何使用 PostCSS

---

一、是什么

官方：用 JavaScript 代码来处理 CSS

那么我们根据官方的这一段话，就可以得知一些相关信息。

文档：PostCSS中文网

1.1 痛点

相较于CSS，我们经常用的less, sass和stylus这些预处理器，虽然很便利，解决了部分痛点（更具灵活性，维护性）

但以下还有一些痛点困扰着我们开发者

1. 不兼容css标准：每个预处理器都有自己的标准，并不是W3C标准，这意味着不一定兼容新的W3C标准。
2. 不能扩展：无论哪种预处理器，都会被限制设定。
3. 不能按需导入：如sass的@extend 功能，当你不使用它们，包的体积没有任何变化

那么在其痛点上，就延伸出例如PostCSS后处理器的插件。

1.2 处理器

以上，我们提到了预处理器，以及PostCSS的后处理器，那么这又是什么？

1.2.1 预处理器（less/sass/stylus）

含义：最终生成css为目标的领域特定语言（有自己的语法）

举个栗子（less）：

.sameColor(@color: '#333'){
   color: @color;
   border-color: @color;
}

.tag {
  .sameColor('#66ccff');
}

编译后

.tag {
  color: '#66ccff';
  border-color: '#66ccff';
}

• 优点：语言级逻辑处理，动态特性，改善项目结构
• 缺点：采用特殊语法，框架耦合度高，复杂度高

1.2.2 后处理器（PostCSS）

含义：对css进行处理，生成css的预处理器

PostCSS 使用 Autoprefixer 插件（浏览器兼容）：

 #content {
   display: flex;
 }

编译后

 #content {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }

• 优点：css原生语法，容易模块化贴近css的未来标准
• 缺点：逻辑处理有限

---

二、怎么用

好了，现在我们了解到，PostCSS是后处理器，可以与预处理器并存结合使用，并不冲突。

2.1 安装

首先，我们来安装一下PostCSS

npm install -g postcss-cli

npm install -g postcss

2.2 配置

其次，我们再创建一个postcss.config.js文件，将需要的插件，写入该文件中，这里我们就安装autoprefixer插件

那么下面就具体介绍的几个方法的使用，使用其中一种即可

2.2.1 方法1 （postcss.config.js ）

postcss.config.js 里直接设置browsers:

module.exports = {
  plugins: [
    require('autoprefixer')({
      // 就h5使用
      remove: process.env.UNI_PLATFORM !== 'h5',
      //兼容市面所有版本浏览器
      browsers: ["> 0% "]
    }),
  ],
};

2.2.2 方法2（package.json）

package.json设置browserslist：

前提，要在postcss.config.js上挂载上autoprefixer插件

"browserslist": [
   "last 2 version",
   "> 1%",
   "ie >= 8"
]

• last 5 version：表示最新五代浏览器
• 大于1%： 表示兼容市面上百分之九十九的浏览器

2.2.3 方法3（.browserslistrc）

实际上，这种方法与方法2（package.json），大差不差,
就是将package.json文件里的代码转移到.browserslistrc文件中。

但也前提需要先行挂载autoprefixer插件，然后在.browserslistrc文件中写入：

last 2 versions 
> 1% 
ie >= 8

2.3 命令转化

我们还可以通过PostCSS单独将代码转化一番，这里有2个方法，也是一样，选择其一即可。

2.3.1 一次性

postcss [转化的文件] -o [生成的文件]

postcss src/index.css -o css/index.css

命令执行就只执行一次，多次保存，需多次转化

2.3.2 实时监听

postcss -w [转化的文件] -o [生成的文件]

post -w src/index.css -o css/index.css

实时监听目标转化文件，进行变动转化。

注意：PostCSS不能直接转化less和sass，只能转化css，因此可将less和sass先编译为css，再进行PostCSS转化

2.4 插件使用

基于PostCSS的框架上，扩展了很多工具和插件，我们可以按需使用，进行对css进行最佳的后处理

2.4.1 autoprefixer

其实上文，我们已经了解过 autoprefixer，其作用是为 CSS 中的属性添加浏览器特定的前缀，实现各个浏览器的兼容性。

导入使用，上文已作说明，这里就不写了（见2.2配置）

2.4.2 postcss-import

postcss-import插件整合其他css代码，实现css模块化。

因为PostCSS转化时不会将导入的css文件转化，所以需要配合使用postcss-import插件合并代码。

在postcss.config.js中引入postcss-import，并在pluings中添加：

module.exports = {
  plugins: [
    require("postcss-import"),
    require('autoprefixer'),
  ],
};

2.4.3 postcss-cssnext：

cssnext，你可以理解为css4，里面有许多css3没有的特性（非正式标准），我们可以借助PostCSS降级到低版本css

在postcss.config.js中引入postcss-cssnext，并在pluings中添加：

module.exports = {
  plugins: [
    require("postcss-cssnext"),
    require("postcss-import"),
    require('autoprefixer'),
  ],
};

转化效果:

:root {
   --text-default: #333;  
}

body {
   color: var(--text-default);
}

转化：

body {
   color: #333;
}

cssnext具体的相关使用，这里就不阐述了。

2.4.4 其他插件

• cssnano：用来压缩代码，提高运行速度。
• postcss-stylelint：用来检查 CSS 中可能存在的格式问题
• postcss-font-magician：用来生成 CSS 中的 @font-face 声明
• precss：允许在 CSS 中使用类似 SASS 的语法

还有其他更多，详细见官网：PostCSS plugins

---

三、感悟

PostCSS，为css开创了一条新的思路，庞大的插件体系，可以随心所欲地DIV自己的css。

而这些都是css领域的皮毛，我了解的越多越不懂，由衷地感叹互联网的技术发展迅速。

一门传世的技术，都是前人解决众多致命的痛点，创作出来的。实质上，是为了提效，解放开发人员，俗称合法偷懒。

所以为了跟上这个快节奏的社会，我们不断地奋斗躺平，奋斗躺平，我们一生都在，由简入繁，由繁入简罢了。

所以，在躺平的过程中，我们更要积攒知识，就如弓箭一般，蓄势待发。

相信在不久的将来，我们将会离开大海，去往更为广阔的天空