PostCSS

PostCSS is a tool for transforming CSS with JavaScript.

特性演示

提升代码可读性

Autoprefixer 将使用基于当前浏览器流行度和属性支持的数据为您应用前缀。

  • input
:fullscreen {
}
  • output
:-webkit-:full-screen {
}
:-moz-:full-screen {
}
:full-screen {
}

使用未来的 CSS 语法

PostCSS Preset Env 允许您将现代CSS转换成大多数浏览器所能理解的内容， 根据目标浏览器或运行时环境，使用 cssdb 来确定您需要的多填充。

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

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

解决全局 css 定义问题

CSS模块 意味着你永远不需要担心你的名字太通用，只要使用最合理的就可以了。

  • input
.name {
  color: gray;
}
  • output
.Logo__name__SVK0g {
  color: gray;
}

避免 css 语法错误

使用时髦的 CSS linter stylelint 执行一致的约定并避免样式表中的错误。它支持最新的CSS语法，以及类似CSS的语法，如SCSS。

  • input
a { 
  color: #d3;
}
  • output

console output

app.css
2:10 Invalid hex color

强大的列表系统

LostGrid 使用calc()创建基于您定义的分数的令人惊叹的网格，而无需传递许多选项。

  • input
div {
  lost-column: 1/3 
}
  • output
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; 
}