[PostCSS] 开篇:PostCSS 是什么

2,293 阅读1分钟

很多人估计都用过一个 Autoprefixer 的 css 工具插件,但并不一定了解 PostCSS

它其实并不是一个特别新的东西,不过我们还是发现了一些补充的东东

PostCSS 是什么

A tool for transforming CSS with JS plugins.

These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more

优点

  • 插件全面

  • 速度快

  • JS 编写,定义自己的预处理器

  • 和其他工具无缝链接

PostCSS 的一些误区

  • 不是一个预处理器

  • Post 的意思指的是加工,不是后处理器 Postprocessor

  • 不是未来的语法,只是可以通过插件来写一些未来的语法

  • 不是 CSS 优化工具

PostCSS 的应用

PostCSS 和我们熟悉的一些结合

  • webpack:postcss-loader

  • gulp:gulp-postcss

  • rollup:rollup-plugin-postcss

  • Stylus:poststylus

基础信息

  • 官网:http://postcss.org/

  • 编辑器高亮:Syntax Highlighting for PostCSS

  • 命令行:postcss-cli

    • 1.x 对应 postcss 4.x

    • 2.x 对应 postcss 5.x

参考:

PostCSS Deep Dive: What You Need to Know

PostCSS深入学习:你需要知道什么_PostCSS, PostCSS深入学习, CSS处理器 教程_w3cplus

hudochenkov/Syntax-highlighting-for-PostCSS: PostCSS syntax highlighting for Sublime Text.