PostCSS是一个很是通用的工具,它能够经过javascript插件转换CSS样式。它的灵活性在于它的建造方式。 PostCSS的核心部分是一个node.js模块,您可使用NPM进行安装,它有一个由200多个插件组成的生态系统,您能够在项目中选择使用这些插件。javascript
PostCSS既不是预处理器,也不是后处理器,由于不一样的PostCSS插件可能属于这两类中的任何一类,或者同时属于这两类;它彻底取决于您对它的理解。使用PostCSS,您不须要学习不一样的语法,好比sass或Less;您能够当即开始使用它。css
PostCSS获取现有的css文件并将其转换为javascript可读数据,而后javascript插件执行修改,postss返回原始文件的修改版本。听起来很酷,不是吗?java
在这篇文章中,咱们将查看6个Postcss插件,让您了解使用这个出色的工具能够实现的一些伟大的事情。node
Autoprefixer autoprefixer多是最知名的postcss插件,由于它被谷歌、Twitter和Shopify等知名科技公司使用。它在必要的地方向CSS规则添加供应商前缀。git
autoprefixer使用我可使用的数据。这样它就不会过期,并且能够应用最新的规则。您能够在它的交互式演示站点上查看它的工做原理。 github
cssnext是一个CSS发起者,它容许您在当前站点上使用将来的CSS语法。W3C有许多新的CSS规则,这些规则目前没有被浏览器实现,但可使开发人员更快、更容易地编写更复杂的CSS。cssnext是用来弥补这个缺口的。浏览器
值得一看它的特性,看看你能用它完成什么,例如你能够在你的设计中使用自定义媒体查询、自定义选择器、颜色修改器、SVG过滤器和新的伪类。缓存
PreCSS是一个postcss插件,工做方式相似于css预处理器。它能够利用样式文件中的标记之类的SASS。sass
经过在工做流中引入PreCSS,您能够在CSS代码中使用变量if else语句、for循环、mixin、@extend和@import规则、嵌套和许多其余方便的功能。PreCSS的Github文档为您提供了如何充分利用它的详细说明。 bash
StyleLint是一个现代的CSS Linter,它能够校对和验证您的CSS代码。它使避免错误变得容易,并促使您遵循一致的编码约定。
Stylelint了解最新的CSS语法,所以它能够与前面提到的precss插件一块儿使用。它还容许您进行本身的配置,甚至检查设置是否有效。
PostssAssets插件是一个方便的CSS文件资源管理器。若是您在URL路径方面遇到问题,这是一个很好的选择,由于PostSS资产将样式表文件与环境变化隔离开来。
您须要定义加载路径、相对路径和基本路径,插件将自动查找您须要的资源。例如,若是须要foobar.jpg图像的正确URL,能够编写如下代码:
body {
background: resolve('foobar.jpg');
}
复制代码
Postcss Assets还负责节省缓存,由于若是但愿在修改资产时自动更改URL路径,能够将cachebuster变量设置为true。这个智能插件还能够计算图像文件的尺寸(宽度和高度),甚至可使用预设比例调整它们的大小
若是您须要一个生产站点的优化和缩小的CSS文件,那么有必要查看cssnano。它是一个模块化的插件,由许多较小的单一责任PostSS插件组成。它不只执行基本的缩小技术,如删除空白,还具备高级选项,使集中优化成为可能。
除了许多其余功能外,cssnano还可以从新调整z-index值、减小自定义标识符、转换长度、时间和颜色值以及删除过期的供应商前缀。