3G Eden
RSS|
CSS 的开发和所有编程语言一样，是一个迭代的过程。每一次主版本的发布都为我们带来新的功能和语法，让我们更好的编写样式。CSS 3 支持交互，这之前只能通过 Javascript 来实现。每天都会有新的工具让我们更简单、更灵活的实现样式。 PostCSS 就是最近被推荐的一个样式处理工具。PostCSS 旨在通过自定义的插件和工具生态体系来重新定义 CSS。与类似 Sass 和 LESS 这样的预处理机制类似，它可以把扩展的语法和功能转换成现代的浏览器友好的 CSS 代码。 How you ask? JavaScript. JavaScript 能做到比其他处理方式更快的转换我们的样式。通过 Gulp 或 者Grunt 这样的 task-runner 工具，我们可以在 build 过程中对样式进行转换，这与 Sass 和 LESS 的编译过程非常类似。React 和 AngularJS 这样的库和框架还允许我们在 JavaScript 中直接编写 CSS 代码，这为使用 JavaScript 来转换样式打开了一扇大门。 |
PostCSS 的历史
|
模块化的好处
|
|
这种优势的一个例子是 PostCSS FontPath 插件。用 Sass 时，我们不能在文件中包含 mixin 来支持 web 字体，所以不得不创建一个 @font-face 标签。
如果在项目中使用 PostCSS FontPath 插件，我们就不用像上面这样包含 Sass mixin。我们只需要在 CSS 里写下面的代码，PostCSS 会通过 Grunt 或 Gulp 转换成我们需要的代码。
写这篇文章的时候，社区里有超过 100 个插件，涉及未来的 CSS 语法、快捷方式、工具、语言扩展等等。它不仅仅是一个工具，从使用的用户量来说，可以比得上 WordPress、Google 和 Twitter。 工作流中加入 PostCSSPostCSS 是用 JavaScript 写的，我们可以在代码里用 Gulp 或者 Grunt 这样的任务管理器来转换 CSS。下面的教程演示了如何在项目中使用 Gulp 或 Grunt 的工作流中与 PostCSS进行协作。两者之间具体选择哪个并不重要，取决于个人喜好以及是否适合项目。 注意：工具的 Gulp 和 Grunt 版本的列表在 GitHub 上。你可以任选一个作为起始模板，然后安装自己需要进行扩展。 |
在 Gulp 里配置 PostCSS
|
|
var postcss = require('gulp-postcss');gulp.task('styles', function () {
return gulp.src('path/to/dev/style.css')
.pipe(postcss([]))
.pipe(gulp.dest(path/to/prod))});
|
在命令行运行 gulp styles 可以运行任务。
在 Grunt 里配置 PostCSS
|
|
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
styles: {
options: {
processors: []
},
dist: {
files: [{
expand: true,
cwd: 'dev/',
src: ['**/*.css'],
dest: 'prod/'
}]
}
}
});
// Load post-css. grunt.loadNpmTasks('grunt-postcss');};
|
在命令行执行 grunt styles 运行这个任务。
安装插件
|
PostCSS 插件安装示例 链接
|
|
npm i postcss-focus -D
|
插件可以直接作为方法的参数，不过为了代码清晰，我们可以构造一个数组，然后把插件放到数组里作为参数。在数组里，我们可以包含所有需要的 require 语句，这些 require 语句会返回插件，然后被立即调用。如果你需要对此有更多的了解，可以看一下 Ryan Christiani 的“Javascript 中函数作为一等公民”。
|
require('postcss-focus')()
|
对于 Grunt，修改后的代码如下（包含我们刚创建的 processorArray 数组）：
|
var processorArray = [
require('postcss-plugin')()];// Snipped for brevitystyles: {
options: {
processors: processorArray },
dist: {
src: 'path/to/dev/style.css',
dest: 'path/to/prod/style.css'
}
}
|
下面是 Gulp 的版本：
|
var processorArray = [
require('postcss-plugin')()];gulp.task('styles', function () {
gulp.src('path/to/dev/style.css')
.pipe(postcss(processorArray))
.pipe(gulp.dest('path/to/prod'))});
|
插件
|
Autoprefixer
|
|
npm i autoprefixer -D
|
当我们把这个插件加到我们的数组里后，可以提供一个对象，这个对象包含了项目需要支持的浏览器的数组。可用的选项列表可以在这里找到：Browserslist Github Account。
下面我们就把 Autoprefixer 插件加到 processor 中：
|
var processorsArray = [
// snipped for brevity require('autoprefixer')({ browsers: ['last 2 versions', 'ie 6-8', 'Firefox > 20'] })];
|
根据这里提供的浏览器支持列表，相应的浏览器厂商前缀会加到对应的 CSS 属性和值上。
|
这是我们的 CSS 代码：
转换后的输出是这样的：
通过 CSSNext 来使用未来的语法CSS4 很快就会到来，它会带来一些新的特性，包括本地变量、自定义媒体查询、自定义的选择器 和新的pseudo-links。虽然写本文的时候 CSS4 还没有被所有浏览器支持，不过它被批准后肯定会被最新的浏览器支持的。 CSSNext 可以把所有 CSS4 特性转换成浏览器可以识别的 CSS3 代码。这个工具可以单独使用，也可以作为 PostCSS 的一个插件。我们可以将其加到 processorsArray，这个数组包含了其他的 PostCSS 插件。 |
|
通过命令行安装 CSSNext 插件
然后，添加插件到你的处理器
现在，在产品代码中，你可以写 CSS4 特性，以及 PostCSS 将通过任务运行器转换语义，从而支持今日的浏览器。当浏览器来支持新语义时，你可以通过开发 CSS 来替换转换的输出。 在这里开发 CSS：
这里是转换后的输出：
如果你想探索更多的 CSSNext 特性，该网站有一个游乐场，你可以尝试使用当前 CSSNext-supported 的 CSS4 特性。 |
SaaS 语法如果 Sass 是你首选预处理的程序语言，别害怕：你可以通过 PostCSS 来使用其语法与工具。然而传统的 CSS 还不支持诸如 PreCSS 允许我们使用这些特性和在传统的 CSS 文件中写 SaaS 语法的变量，嵌套和进口插件。 如果我们在我们的数组中通过命令行和参考包来添加插件到我们的构建，我们可以立即在 Sass 语法中开始编写。如果你从 Sass 切换到 PostCSS，你可以改变文件扩展到 .css 以及通过任务运行器来输送。 通过命令行来安装 PreCSS 插件，像这样：
然后，添加插件到你的处理器：
此外，在这里开发 CSS：
然后转换输出：
|
使用社区插件扩展 CSS虽然插件可用于帮助我们更有效地编写代码，但是 PostCSS 的重心在于社区插件。这些插件给我们更快的方式编写风格，或者至少更容易的方法来实现创造性的样式。使用这些插件的 PostCSS API，它允许在我们的项目中自定义属性，选择器和价值观，使我们能够更有效地和使用更少的搜索来编写样式。 量查询量查询是强大的。他们允许我们计算元素的 CSS 和基于他们同胞数量之上的应用样式。虽然选择器有点难写，因为他们使用一些先进的 CSS 选择器，今天您可以在你的 CSS 中使用它们。虽然像 QQ 在线工具的存在是为了帮助我们写这些查询，我们可以直接的利用 PostCSS 来使用自定义选择器的样式。 通过使用量查询，以及在像任何其他的项目中安装插件，通过命令行：
并将插件添加到你的处理器：
一旦安装，您可以使用自定义选择器，仅仅可用于基于匹配的元素应用样式来通过其插件。 |
|
在这里开发 CSS：
然后转换输出:
通过 Short 扩展 Shorthand Properties当我们编写样式时，您可能会遇到让你说,“这可能是更短的。“的语法属性。 该 Short 插件帮助我们做到那一点：更符合逻辑地编写我们的样式。它使我们编写 shorthand properties forpositionandsize，就像 howbackgroundandfontcan 能用一个简单的声明。 通过该 PostCSS API，该 shorthand 声明被转换为允许一个清洁发展样式表和一个更有组织的生产样式表的 browser-digestible 风格。 |
|
通过命令行安装 Short 插件：
添加插件到你的处理器：
该 text 属性包括这些输入属性：color, font-style,font-variant, font-weight, font-stretch, text-decoration, text-align,text-rendering, text-transform, white-space, font-size, line-height,letter-spacing, word-spacing and font-family. 在这里开发 CSS：
然后转换输出：
该声明中的 position 属性允许包括 top, left, right, bottom 值。该值的顺序是顺时针方向的，在语法中使用 1 到 4 的值。如果有一个在其位置中你愿意排除和仅仅通过一个*的值。 在这里开发 CSS，然后：
然后转换输出：
|
这对我们的行业意味着什么?
|
|
当 PostCSS 用新的方式自定义语法和特性来继承 CSS 的时候，它可能会给那些试着掌握这种语言和它的复杂性的初学者带来挑战。如果你和一个中级开发者使用 PostCSS 开发一个项目，尽量鼓励他们去深入理解这门语言，像 Sass 一样，PostCSS 是一个简单的制作工具，它使编写样式变得高效。 今天就使用 PostCSS 在接下来的几年里，我们使用 CSS 的方式将会有许多的改变。每一个项目都有不同的需求，我们需要适应我们的生产方法。使用像 PostCSS 这样的模块化生态系统能让我们选择和使用我们所需要的特征去完成项目。 我希望你去探索 PostCSS 的世界以及它里面所有可用的插件。因为它是一个社区项目，只有当人们使用它、给它制作插件才会使这个生态系统成长。想要探索更多的插件，可以浏览 NPM 上的可用包，并且测试它们的性能在 PostCSS Playground上。 (rb, al, ml) |
本文转自：开源中国社区 [http://www.oschina.net]
本文标题：PostCSS 简介
本文地址：http://www.oschina.net/translate/introduction-to-postcss
参与翻译：zicode, crossmix, 雪落无痕xdj, 终日乾乾
英文原文：An Introduction To PostCSS
