PostCSS - 是一个用 JavaScript 转换 CSS 的工具

提供代码可读性

根据 Can I Use 数值给 CSS 规则添加不同浏览器的前缀。 Autoprefixer 使用的数据基于当前浏览器流行程度和属性支持，并为你添加浏览器前缀。

:fullscreen {
}

CSS input

:-webkit-:full-screen {
}
:-moz-:full-screen {
}
:full-screen {
}

CSS output

让你今天就使用面向未来的 CSS!

PostCSS Preset Env 让你转换现代的 CSS 代码成为大部份当下浏览器都能识别的代码, 并根据你目标兼容的浏览器或者运行环境，使用cssdb决定你的所需的兼容垫片(polyfiils)。


@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 变量的终结

CSS Modules 意味着你今后再不用担心你的 CSS 规则命名太通用。请放心使用你任何有意义我命名。

.name {
  color: gray;
}

CSS input

.Logo__name__SVK0g {
  color: gray;
}

CSS output

避免CSS代码中的错误

使用stylelint，一个现代的 CSS 代码检查工具。实施一致性规范并且避免你样式中的错误。它支持最新的 CSS 语法，以及类 CSS 语法，例如 SCSS。

a { 
  color: #d3;
}

CSS input

app.css
2:10 Invalid hex color

Console output

强大的网格系统

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

Is your company using PostCSS? Let us know!