Autoprefixer

增强代码的可读性

利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。Autoprefixer 自动获取浏览器的流行度和能够支持的属性,并根据这些数据帮你自动为 CSS 规则添加前缀。

:fullscreen {
}
CSS input
:-webkit-:full-screen {
}
:-moz-:full-screen {
}
:full-screen {
}
CSS output
Cssnext

将未来的 CSS 特性带到今天!

PostCSS Preset Env 帮你将现代 CSS 语法转换成大多数浏览器都能理解的东西,根据你的目标浏览器或运行时环境来确定你需要的 polyfills,基于 cssdb 实现


@custom-media --med (width <= 50rem);

@media (--med) {
  a {
    &:hover {
      color: color-mod(black alpha(54%));
    }
  }
}
CSS input
@media (max-width: 50rem) {
  a:hover  {
    color: rgba(0, 0, 0, 0.54);
  }
}
CSS output
CSS Modules

终结全局  CSS

CSS 模块 就是说你永远不用担心命名太大众化而造成冲突太普通,只要用最有意义的名字就行了。

.name {
  color: gray;
}
CSS input
.Logo__name__SVK0g {
  color: gray;
}
CSS output
stylelint

避免  CSS 代码中的错误

通过使用 stylelint 强化一致性约定并避免样式表中的错误,stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法,包括类似 CSS 的语法,例如 SCSS 。

a { 
  color: #d3;
}
CSS input
app.css
2:10 Invalid hex color
Console output
LostGrid

强大的网格系统

LostGrid 利用 calc() 和你所定义的分割方式来创建网格系统,无需传递大量参数。

div {
  lost-column: 1/3
}
CSS input
div {
  width: calc(99.9% * 1/3 -
  (30px - 30px * 1/3));
}
div:nth-child(1n) {
  float: left;
  margin-right: 30px;
  clear: none;
}
div:last-child {
  margin-right: 0;
}
div:nth-child(3n) {
  margin-right: 0;
  float: right;
}
div:nth-child(3n + 1) {
  clear: both;
}
CSS output

Trusted by industry leaders

  • Facebook
  • GitHub
  • Google
  • Wordpress
  • Wikipedia
  • Jetbrains
  • Taobao

Is your company using PostCSS? Let us know!