PostCSS到底是个啥？

--------------------------------2020.11.25----------------------------------------------
当你想要在你的代码加一些新出的CSS属性时，通常要为不同的浏览器给新的CSS属性添加不同的前缀，以此来兼容不同的浏览器。

<style>
.some-element {
 box-sizing: border-box;
 -webkit-box-sizing: border-box;  // chrome, safari prefix
 -moz-box-sizing: border-box;     // firefox
 -o-box-sizing: border-box;       // old opera versions
 -ms-box-sizing: border-box;      // IE, Microsoft Edge
}
</style>

你必须时刻关注CSS属性是否被浏览器默认支持才能移除对应浏览器的前缀代码

一个个手动添加前缀那肯定是非常痛苦的事情。

所以诞生了Autoprefixer这个插件：

1. 这是一个命令行工具
2. 通过npm安装
3. 通过检测你的代码并自动添加前缀
4. 根据Can I use的规范进行添加
5. 是众多PostCSS插件中的一个

什么是PostCSS？

1. PostCSS就是一个使用JavaScript插件来转换CSS的工具
2. 提供了庞大的插件库来提升你的CSS编写体验
3. 你可以选择一个你需要的插件或者自己写一个来使用。
4. 总结：这个一个用来运行插件的平台

简单来说，你正常地写完了一句CSS，然后PostCSS的插件就会自动分析你代码并转换成你想要的格式

为什么要用PostCSS?

首先要通过一些例子来看看PostCSS插件带来的作用。

自动添加前缀

前面也提到过，这是转换前的代码：

:fullscreen {
}

这是转换后的代码：

:-webkit-:full-screen {}
:-moz-:full-screen {}
:full-screen {}

转换CSS成浏览器兼容的语法

使用PostCSS Preset Env插件，转换前：

@custom-media --med (width <= 50rem);
@media (--med) {
  a { 
    &:hover {
      color: color-mod(black alpha(54%));
    }
  }
}

转换后：

@media (max-width: 50rem) {
  a:hover  { 
    color: rgba(0, 0, 0, 0.54);
  }
}

指出CSS中的语法错误

stylelint插件，代码：

a { 
  color: #d3;
}

命令行输出：

app.css
2:10 Invalid hex color

限制CSS类名的作用域

使用CSS Modules插件，你可以将CSS只作用在当前组件上，使你的类名不会产生冲突，转换前：

.name {
  color: grey;
}

转换后：

.Logo__name__SVK0g {
  color: gray;
}

PostCSS、Sass和Less之间的区别？

1. Sass、Less和Stylus这些预处理器能做的，PostCSS同样也能做。
2. 最大的不同就是PostCSS可以只取所需，Sass和Less会给你很多东西使用但不一定用得上且不能拓展
3. 假如你正在使用Sass、Less或者Stylus，它们不能做的，你可以添加PostCSS插件实现（比如添加前缀或者代码校验）
4. 也有像PostCSS Sass 和 PreCSS这样的插件代替Sass，也就意味着你可以自己使用PostCSS编写你自己的CSS预处理器

配置方式

有几种方式可以配置PostCSS，像是Gulp、Webpack,这篇文章则使用PostCSS CLI

PostCSS CLI

npm安装，命令行运行：

npm install -g postcss-cli

或者使用yarn：

yarn global add postcss-cli

当然也可以为项目添加需要的插件，比如：

yarn add --dev autoprefixer postcss-nested postcss-cli

在我们的项目里，可以这样使用插件来转换CSS

postcss --use autoprefixer -o main.css css/*.css

上面这行命令会对*/css/*文件夹下的css文件运行Autoprefixer插件并输出到main.css中，你也可以将这段命令放在package.json的scripts对象中

React和Vue

值得注意的是，在React和Vue的脚手架像是Create React App和VueCLI中内置了PostCSS并且伴有几个插件，你可以选择更多的插件通过更多配置