PostCSS:通过JS插件来转换CSS

postcss

PostCSS是一款通过JS插件来转换CSS的工具。这些插件能帮你校验你的CSS代码、转换未来的CSS语法、支持变量和混写、以及内联图片等等。PostCSS被Google、Twitter、阿里巴巴、Shopify等多家业界大公司高层使用,其中自动前缀插件是PostCSS最受欢迎预处理器之一。

Twitter账号:@postcss
VK.com页面:postcss
支持/讨论:Gitter

插件

目前,PostCSS已经拥有200多个插件可供选择,你可以在插件列表或者搜索目录中看到所有的插件。下面列举一些我喜欢的插件——它们能代表PostCSS搭建网站的最高水准。
如果你有任何想说的,通过PostCSS插件开发页面找到我们很是方便。

解决CSS全局问题

使用未来的CSS

  • autoprefixer从“我能用吗?”网站中获取数据,允许添加厂商前缀。
  • postcss-cssnext能让你使用未来的CSS功能(也包含autoprefixer)。

增强CSS阅读性

  • precss自带类似Sass的功能,比如变量、嵌套、混写等。
  • postcss-sorting为规则和@规则内容分类。
  • short添加和扩展许多简略属性。

图像和字体

校验器

  • stylelint是一款模块化样式表校验器。
  • doiuse从“我能用吗?”网站中获取数据,校验CSS浏览器支持。
  • colorguard能帮你保持色彩统一。

其他

  • lost是一个富功能的calc()网格系统。
  • cssnano是模块化的CSS压缩器。
  • rtlcss可以帮你把“右-左”样式镜像为“左-右” 模式。

语法

不仅仅是CSS,PostCSS可以在任何语法中转换样式。如果它不支持你所喜好的语言,可以考虑自己编写一个(对象&字符串)双向解析器来扩展PostCSS。

  • sugarss是一款类似Sass或Stylus的基于缩进的语法 。
  • postcss-scss允许你同时使用SCSS(但不支持把SCSS编译成CSS)
  • postcss-less允许你同时使用LESS(但不支持把LESS编译成CSS)
  • postcss-js允许你用JS编写样式,也可以转换React内联样式、Radium或JSS。
  • postcss-safe-parser帮你查找并修补CSS语法错误。
  • midas可以把CSS字符串转换成HTML输出。

相关文章

用法

两步之内用上PostCSS:

  1. 在你的创建工具中找到并添加PostCSS;
  2. 选择插件然后把它们添加到你的PostCSS进程中。

Gulp

gulp-postcssgulp-sourcemaps

Webpack

postcss-loader

npm 运行 / 命令行

在命令行界面下使用PostCSS,或通过postcss-cli操作npm脚本。

JS中的CSS

如果要在React内联样式、JSS、Radium及其他CSS-JS工具中应用PostCSS插件,你可以使用postcss-js来转换样式对象。

运行器

JS API

如果使用其他语言环境,可以用JS API:

如需了解JS API的更多信息,请查看PostCSS API文档

所有PostCSS运行平台都应遵守PostCSS运行器规范

选项

大多数PostCSS运行器都支持2种参数:

  • 插件数组
  • 选项对象

常用选项:

  • syntax:一个有语法解析与字符串化功能的对象。
  • parser:特殊语法解析器(如:SCSS)。
  • stringifier:特殊语法输出生成器(如: Midas)。
  • map源位置选项
  • from:输入文件名(大多数运行器能自动生成)。
  • to:输出文件名(大多数运行器能自动生成)。

Node.js 0.10与Promise API

如果你想在Node.js 0.10上运行PostCSS,可以添加Promise polyfill

官方网站:http://postcss.org/
开源地址:https://github.com/postcss/postcss

打赏支持我整理更多优质资源,谢谢!

打赏编辑

打赏支持我整理更多优质资源,谢谢!

任选一种支付方式

1 收藏

资源整理者简介:凝枫

非典型性程序员,爱做一些和写程序毫不相干的事 个人主页 · 贡献了46个资源 · 1


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1439 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer