关于PostCSS的一点小科普

PostCSS起源于2013年9月&＃xff0c;发展到现在&＃xff0c;已经有很多开发者在工作中使用它。如果你尚未接触过PostCSS&＃xff0c;这篇文章正适合你。

PostCSS是一个使用Javascript插件来转换CSS的工具。

PostCSS本身很小&＃xff0c;其只包含CSS解析器&＃xff0c;操作CSS节点树的API&＃xff0c;资源生成器&＃xff08;译者注1&＃xff1a;原文是source map&＃xff09;&＃xff0c;以及一个节点树字符串化工具。所有的黑魔法都是通过利用插件实现的。

截止目前&＃xff0c;PostCSS的生态圈内已经拥有超过100种插件。这些插件可以做太多的事情&＃xff0c;比如lint&＃xff08;译者注2&＃xff1a;一种用来检测CSS代码的工具&＃xff09;&＃xff0c;添加vendor prefixes&＃xff08;译者注3&＃xff1a;添加浏览器内核前缀&＃xff0c;可以使用浏览器的一些独有特性&＃xff09;&＃xff0c;允许使用最新的CSS特性&＃xff0c;在你的CSS里提供统计数据&＃xff0c;或者是允许你使用Sass&＃xff0c;Less或是Stylus等CSS预处理器。

让我们看看以下十种插件

Autoprefixer

根据用户的使用场景来解析CSS和添加vendor prefixes&＃xff08;前文注2&＃xff09;。

PostCSS Focus

一种利用键盘操作为每个:hover添加:focus选择器的PostCSS插件。

PreCSS

一个允许你在代码中使用类似Sass标记的插件。

Stylelint

一种强大的&＃xff0c;先进的可以使你在CSS样式中保持一致性&＃xff0c;避免错误的CSS linter工具。

PostCSS CSS Variables

一种将用户自定义CSS变量&＃xff08;CSS variables&＃xff09;转化为静态样式的插件。

PostCSS Flexbugs Fixes

一种用于修复flexbug的bug的插件。

PostCSS CSSnext

一种可以让你使用CSS最新特性的插件。它通过将最新的CSS特性转变为现阶段浏览器所兼容的特性&＃xff0c;这样你不用再等待浏览器对某一特定新特性的支持。

PostCSS CSS Stats

一种支持cssstats的插件。这个插件将会返回一个cssstatus对象&＃xff0c;这样你可以使用它来进行CSS分析。

PostCSS SVGO

优化在PostCSS中内联SVG。

PostCSS Style Guide

一种可以自动生成风格指导的插件。将会在Markdown中生成CSS注释&＃xff0c;并在生成的HTML文档中显示。

如果你想编写自己的插件&＃xff0c;并希望将其贡献给社区的话&＃xff0c;请确保你是先看过guidelines这篇文档还有PostCSS Plugin Boilerplate这篇官方文档。

在你的工作中使用PostCSS

PostCSS是用Javascript所编写的&＃xff0c;这使得我们在Grunt&＃xff0c;Gulp或Webpack等常用的前端构建工具中使用它变得非常方便。

下面是我们使用Autoprefixer插件的示例。

npm install autoprefixer --save-dev

Gulp
如果你使用Gulp&＃xff0c;那么你需要安装gulp-postcss。

npm install --save-dev gulp-postcss

gulp.task(&＃39;autoprefixer&＃39;, function () {var postcss &＃61; require(&＃39;gulp-postcss&＃39;);var autoprefixer &＃61; require(&＃39;autoprefixer&＃39;);return gulp.src(&＃39;./src/*.css&＃39;).pipe(postcss([ autoprefixer({ browsers: [&＃39;last 2 versions&＃39;] }) ])).pipe(gulp.dest(&＃39;./dest&＃39;));
});

Grunt
如果你使用Grunt&＃xff0c;那么你需要安装grunt-postcss。

npm install grunt-postcss --save-dev

module.exports &＃61; function(grunt) {grunt.loadNpmTasks(&＃39;grunt-postcss&＃39;);grunt.initConfig({postcss: {options: {map: true,processors: [require(&＃39;autoprefixer&＃39;)({browsers: [&＃39;last 2 versions&＃39;]})]},dist: {src: &＃39;css/*.css&＃39;}}});grunt.registerTask(&＃39;default&＃39;, [&＃39;postcss:dist&＃39;]);};

Webpack
如果你使用Webpack&＃xff0c;那么你需要安装postcss-loader。

npm install postcss-loader --save-dev

var autoprefixer &＃61; require(&＃39;autoprefixer&＃39;);module.exports &＃61; {module: {loaders: [{test: /\.css$/,loader: "style-loader!css-loader!postcss-loader"}]},postcss: function () {return [autoprefixer];}
}

关于怎么整合PostCSS&＃xff0c;你可以从这里PostCSS repo获取到帮助。

最后最后的诚心安利~

在有些时候&＃xff0c;在新技术&＃xff0c;新工具&＃xff0c;新框架发布的时候&＃xff0c;去使用并观察其发展趋势无疑是一种明智的行为。现在&＃xff0c;PostCSS已经发展到一个相当成熟的阶段&＃xff0c;我强烈建议你在你的工作中使用它。因为它现在已经在工程中被广泛的使用&＃xff0c;同时在未来一段时间内它不会发生太大的变化。