[TOC] # css预编译器过时了吗？ CSS预编译的理念与 Babel 有一定相通之处，最重要的区别是：预编译语法并非规范的CSS，而是各成一派。由预编译语法编写的源代码不能在任何宿主浏览器中运行。从这个角度考虑，CSS 预编译更像 CoffeeScript、TypeScript等 JavaScript 子集。 可以预见的是，如果未来CSS规范推出了预编译类似的特性和语法，这些预编译器都将成为历史的尘埃。PostCSS 则反其道而行之，从理念上更加接近Babel，业内也有人将其称为“ CSS 的 Babel”。 PostCSS鼓励开发者使用规范的 CSS 原生语法编写源代码，然后配置编译器需要兼容的浏览器版本，最后经过编译将源码转化为目标浏览器可用的 CSS 代码。PostCSS 提供了丰富的插件用于实现不同场景的编译需求，最常用的比如 autoprefixer、sprites 等，编译流程如下图所示：  css 预编译器和 PostCSS 可以协同使用。有一个流行的用法就是`Sass`编译后再接 PostCSS 的 Autoprefixer（毕竟这是 PostCSS 的招牌插件。 # PostCSS http://postcss.org/ [PostCSS Playground](https://sneakertack.github.io/postcss-playground/) [PostCSS介绍](http://www.zcfy.cc/article/81)  PostCSS自身只包括css分析器，css节点树API，source map生成器以及css节点树拼接器，它能够将 CSS 解析成抽象语法树（AST）。 所以说，**PostCSS 它需要一个插件系统才能够发挥作用**。我们可以通过“插件”来传递AST，然后再把AST转换成一个串，最后再输出到目标文件中去。当然，这里是有API可以用，这里先不讲，免得晕了。 1. 它能够为 CSS 提供额外的功能； 2. 通过在 PostCSS 这个平台上，我们能够开发一些插件，来处理我们的CSS，比如热门的：autoprefixer 3. 我们能够使用JavaScript来开发插件（这点对前端来说很重要） PostCSS 并不是另一种CSS预编译器，与 SASS、Less 等预编译器也并不冲突。 即使是PostCSS 支持的“未来 CSS 语法”也并不能完全弥补CSS的缺陷，所以目前普遍的方案是将 CSS 预编译与PostCSS 综合在一起： 1. 使用 CSS 预编译弥补 CSS 源码的弱编程能力，比如变量、运算、继承、模块化等； 2. 使用 PostCSS 处理针对浏览器的需求，比如autoprefix、自动css sprites等。 通过查看：[从Sass过渡到PostCSS](http://www.w3cplus.com/preprocessor/sass-to-postcss.html)，你是不是和作者一样的感觉，使用了 cssnext 和 postcss 就没有使用sass、less 等预编译工具的地方了。（sass 能做的 postcss 都能做~）。 # 使用方法 ## Gulp [PostCSS深入学习：Gulp设置](http://www.w3cplus.com/PostCSS/postcss-quickstart-guide-gulp-setup.html) Use [gulp-postcss](https://github.com/postcss/gulp-postcss) and [gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps)。 ```js gulp.task('css', function () { var postcss = require('gulp-postcss'); var sourcemaps = require('gulp-sourcemaps'); return gulp.src('src/**/*.css') .pipe( sourcemaps.init() ) .pipe( postcss([ require('precss'), require('autoprefixer') ]) ) .pipe( sourcemaps.write('.') ) .pipe( gulp.dest('build/') ); }); ``` ## npm run / CLI To use PostCSS from your command-line interface or with npm scripts there is [postcss-cli](https://github.com/postcss/postcss-cli)。 ~~~ postcss --use autoprefixer -c options.json -o main.css css/*.css ~~~ # 插件 在查找相应功能插件的时候可以参考[precss](https://github.com/jonathantneal/precss)，同时[PostCSS 插件](https://www.postcss.parts/)版块中也有一个 Sass 的，也可以拿来参考看看。 ## postcss-preset-env 因为[cssnext](http://cssnext.io/)已经不再维护了，所以不推荐。 挑选未来语法的插件：[postcss-preset-env](https://preset-env.cssdb.org/)，支持变量、运算、color function... ## autoprefixer [autoprefixer](https://github.com/postcss/autoprefixer) 是一个后处理程序，不象Sass以及Stylus之类的预处理器。它适用于普通的CSS，可以实现css3代码自动补全。也可以轻松跟Sass，LESS及Stylus集成，在CSS编译前或编译后运行 之前我用自定义Sass混合宏来解决添加所需要的前缀的问题**cssnext 包含了 autoprefixer** ~~~ npm i autoprefixer -D ~~~ ## stylelint [stylelint](http://stylelint.io/) 是基于 PostCSS 的，所以它能理解 PostCSS 可以解析的任何语法，包括 SCSS，SugarSS 和 Less 的实验特性 [使用stylelint对CSS/Sass做代码审查](http://www.w3cplus.com/workflow/How-to-lint-your-css-with-stylelint.html) [使用 stylelint找出你的CSS样式表里的错误和问题](http://www.webhek.com/post/stylelint-css.html) ### stylelint 是否可以修补我的错误？ 不，但是另外一个叫做[stylefmt](https://github.com/morishitter/stylefmt)旨在做到这一点。它需要一个stylelint配置 – 十分类似于你在linting使用的 – 并且可以修复任何错误。我们希望随着社区人员的贡献，stylelint可以发展到自动修补违反stylelint规则的错误。请帮他们实现这个目标！ 你也可以使用其它的工具，例如[CSScomb](http://csscomb.com/)或者与 stylelint 联合使用的[perfectionlist](https://github.com/ben-eb/perfectionist)，自动修复并自动强制休息。 ## CSSNext 通过命令行安装 [cssnext](http://cssnext.io/) 插件，如下： ~~~ npm i postcss-cssnext -D ~~~ CSS4 不久将要来到我们身边，CSS4 将带来一些新的特性，如[变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_variables),[自定义选择器](https://drafts.csswg.org/css-extensions/#custom-selectors) 和[新的伪类链接](https://drafts.csswg.org/selectors-4/#negation) 。在写这篇文章时，这些新特性在所有浏览器都不支持，但是它们将在现代浏览器中实现规范得到了批准。 CSSNext 可以把任意的 CSS4 特征或属性转换成浏览器可以解析的 CSS3 属性。这个工具可以单独使用，也可以做为PostCSS 的插件使用。 可以让你使用 SS4+ 的语法（增加了[变量]()等许多特性），它会帮你转化为目前可用的 CSS3。 ## cssnano 使用 [cssnano](http://cssnano.co/) 执行各种优化，删除空白和注释，并且压缩代码。 ## postcss-partial-import 支持 css、scss 的 @import 语法 ## post-advanced-variables 变量、mixin、if、for、each ## post-extend % ## Rework 取代 Stylus 的插件化框架 # 参考 > [FROM SASS TO POSTCSS IN 10 MINUTES](https://matti.dev/post/from-sass-to-postcss-ten-minutes) > [在 CSS 预编译器之后：PostCSS](https://segmentfault.com/a/1190000002784857)