[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)