PostCSS

使用 JavaScript 转换 CSS 的工具

提高代码可读性

使用 Can I Use 中的值向 CSS 规则添加供应商前缀。Autoprefixer 将使用基于当前浏览器流行度和属性支持的数据为您应用前缀。

:fullscreen {
}
CSS 输入
:-webkit-full-screen {
}
:-ms-fullscreen {
}
:fullscreen {
}
CSS 输出

今天就使用明天的 CSS!

PostCSS Preset Env 可让您将现代 CSS 转换为大多数浏览器都能理解的内容,并根据目标浏览器或运行时环境确定您需要的填充程序,方法是使用 cssdb

body {
  color: oklch(61% 0.2 29);
}
CSS 输入
body {
  color: rgb(225, 65, 52);
}
CSS 输出

全局 CSS 的终结

CSS Modules 意味着您不必担心您的名称过于通用,只需使用最合理的名称即可。

.name {
  color: gray;
}
CSS 输入
.Logo__name__SVK0g {
  color: gray;
}
CSS 输出

避免 CSS 中的错误

使用 stylelint(一款现代 CSS linter)来强制执行一致的约定并避免样式表中的错误。它支持最新的 CSS 语法以及类似 CSS 的语法,例如 SCSS。

a {
  color: #d3;
}
CSS 输入
app.css
2:10 Invalid hex color
控制台输出

赞助商

您的公司是否在使用 PostCSS?加入此列表!

受到行业领导者的信赖

由社区为社区打造

PostCSS 由数百名开源贡献者开发和维护。成为我们的一员 — 提交您的第一个 Pull Request!