关于PostCSS的一点小科普_html/css_WEB-ITnose

来源：懂视网责编：小采时间：2020-11-27 16:41:01

关于PostCSS的一点小科普_html/css_WEB-ITnose

关于PostCSS的一点小科普_html/css_WEB-ITnose: 原文链接 : PostCSS – What It Is And What It Can Do 原文作者 : Jake Bresnehan 译文出自 : 掘金翻译计划译者 : Zheaoli 校对者: aidistan, JolsonZhu PostCSS 起源于2013年9月，发展到现在，已经有很多开发者在工作中使用它。如

推荐度：

点击下载本文 文档为doc格式

导读关于PostCSS的一点小科普_html/css_WEB-ITnose: 原文链接 : PostCSS – What It Is And What It Can Do 原文作者 : Jake Bresnehan 译文出自 : 掘金翻译计划译者 : Zheaoli 校对者: aidistan, JolsonZhu PostCSS 起源于2013年9月，发展到现在，已经有很多开发者在工作中使用它。如

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

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

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

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

让我们看看以下十种插件

Autoprefixer

根据用户的使用场景来解析CSS和添加vendor prefixes（前文注2）。

PostCSS Focus

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

PreCSS

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

Stylelint

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

PostCSS CSS Variables

一种将用户自定义CSS变量CSS variables）转化为静态样式的插件。

PostCSS Flexbugs Fixes

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

PostCSS CSSnext

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

PostCSS CSS Stats

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

PostCSS SVGO

优化在PostCSS中内联SVG。

PostCSS Style Guide

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

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

在你的工作中使用PostCSS

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

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

npm install autoprefixer --save-dev

Gulp如果你使用Gulp，那么你需要安装gulp-postcss 。

npm install --save-dev gulp-postcss

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

Grunt如果你使用Grunt，那么你需要安装grunt-postcss 。

npm install grunt-postcss --save-dev

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

Webpack如果你使用Webpack，那么你需要安装 postcss-loader 。

npm install postcss-loader --save-dev

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

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