PPxu

PostCSS - 使用 JavaScript 转换 CSS

原文链接: www.keycdn.com

picture of PostCSS

当我们谈到 CSS,总是有新的工具不断推出,帮助我们用一种更快更有效的方式来转换样式。过去一年在开发者社区中有很多关于 PostCSS 的讨论。因此今天我们觉得可以给你一个简明的介绍,关于 PostCSS 是什么,以及如何用它来优化你的开发工作流。记得也去看一下我们之前写的讨论 CSS 预处理器之间的一些差异的文章,Sass vs LESS

PostCSS 是什么?

PostCSS 由 Andrey Sitnik 开发,他也是 Autoprefixer 的作者,是一个用 JavaScript(主要通过插件)给 CSS 处理和转换样式的工具。通常它被认为是一个后处理器,不过有时候也被认为是 预处理器。最后,David Clark 有一个非常棒的总结。

请注意无论工具本身还是插件生态圈都不是 Sass 和 LESS 的直接类比物。不过:捆绑一组相关的插件,将开发者友好的样式表转换成浏览器友好的 CSS,这一点和那些优秀的 “预处理器” 的体验是相似的。

无论你把它叫做什么,重要的是知道它的差别以及工作原理。PostCSS 不一定是 Sass 或者 LESS 的替代品。你还是可以使用你喜欢的预处理器,然后用 PostCSS 的插件处理(尽管这可能会增加你的工作流的复杂度,而不是简化)。PostCSS 本身基本上只是一套允许你和 PostCSS 的插件进行沟通的 API。这些插件可以检查你的 CSS 代码,支持变量和混合,编译未来标准的 CSS 语法,以及行内图片等等。可以把它认为是一个高度模块化的配置系统。

过去的 12 个月里 PostCSS 在开发者中间正变得越来越流行。你可以看到在 npm 上 每天的下载 数量正在稳步提升。从 2014年12月31号 到 2016年7月28号,一共有 21,757,724 次下载。

postcss npm stats

如果我们在 Google Trends 上面搜索 “PostCSS”,可以看到有一条明显的增长曲线。

postcss google trends

使用 PostCSS 的优点

如果你精通 CSS,使用 PostCSS 比使用一个预处理器或者什么也不用有更多的优点。首先,它 通过一种新的方式用自定义语法和特性来帮助扩展 CSS。其中一个最大的优点可能就是使用它配套的 插件生态圈。现在已经有200多个插件,可以在 这里 看到一个完整的清单。

postcss plugin list

使用 PostCSS 的其他优点还包括通过 创建你自己的插件和自定义函数 来更轻松的扩展功能。你就可以将你的 CSS 转换成任何你个人需要的形式并应用到你的工作流中。

另一个优点是 PostCSS 快的不可思议。在编译的时候你可能没有注意到这一点,不过还是值得一提的。

PostCSS:   36 ms
libsass:   110 ms  (3.0 times slower)
Less:      157 ms  (4.3 times slower)
Stylus:    286 ms  (7.9 times slower)
Ruby Sass: 1092 ms (30.1 times slower)

PostCSS 还用到了模块,这意味着你可以 更方便的命名语法。你可以在这个例子中观察输入和输出。

CSS 输入

.name {
  color: gray;
}

CSS 输出

**.Logo****__**name**__****SVK0g** {
  color: gray;
}

最后,你可以在 CSS 中 避免更多的错误,因为它基于 stylelint 进行了强制的格式规范检查。看下面的例子。

CSS 输入

a { 
  color: #d3;
}

CSS 输出

app.css
2:10 Invalid hex color

PostCSS 和预处理器的区别

如果你还感到困惑,这里有一个关于 PostCSS 和类似 Sass 这样的预处理器的差异的例子。通常用 Sass 的话你会使用一个函数,比如 rem,来做一个单位转换。

/* 输入 */
.selector { margin-bottom: **rem**(20px); }

/* 输出,假设基础的字体大小是 1rem */
.selector { margin-bottom: 1.25rem; }

使用 PostCSS 的 postcss-pxtorem 插件,我们不再需要在代码中使用函数,它会自动给我们完成单位转换。

/* 输入 */
.selector { margin-bottom: 20px; }

/* 输出,假设基础的字体大小是 1rem */
.selector { margin-bottom: 1.25rem; }

开始使用 PostCSS

如果你用过 Grunt 或者 Gulp 的任务,开始使用 PostCSS 对你来说应该非常容易。只需要两步就可以开始了:

  1. 将 PostCSS 扩展添加到任何你的工作流正在使用的构建工具中,无论是 Gulp,Grunt,还是别的。

  2. 从众多的可用插件中选择你需要的,并交给 PostCSS 处理。

Gulp

你可以运行下面的命令在 Gulp 中配置 PostCSS。这里用到了 gulp-postcss。当然你需要先装好 Node.js、NPM 和 Git。

`$ npm install --save-dev gulp-postcss`

然后安装你需要的 PostCSS 插件。用法如下。

var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
        autoprefixer({browsers: ['last 1 version']}),
        cssnano(),
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});

Grunt

运行下面的命令在 Grunt 中配置 PostCSS。这里用到了 grunt-postcss。当然你还是需要先装好 Node.js、NPM 和 Git。

npm install grunt-postcss --save-dev

插件装好后,你需要在 Grunt 的配置文件中启用它:

grunt.loadNpmTasks('grunt-postcss');

然后安装你需要的 PostCSS 插件。用法如下。

`$ npm install grunt-postcss pixrem autoprefixer cssnano` 
grunt.initConfig({
  postcss: {
    options: {
      map: true, // inline sourcemaps

      // or
      map: {
          inline: false, // save all sourcemaps as separate files...
          annotation: 'dist/css/maps/' // ...to the specified directory
      },

      processors: [
        require('pixrem')(), // add fallbacks for rem units
        require('autoprefixer')({browsers: 'last 2 versions'}), // add vendor prefixes
        require('cssnano')() // minify the result
      ]
    },
    dist: {
      src: 'css/*.css'
    }
  }
});

PostCSS 示例

下面是一组使用热门的 PostCSS 插件的示例,你可以看看它是如何转换 CSS 的。

autoprefixer

这里是一个使用 PostCSS 的 autoprefixer 插件的例子。这个插件非常整洁,它会解析你的 CSS,然后根据 Can I Use 上面的结果自动添加特定的前缀到 CSS 规则中。这样就不需要去记忆浏览器各种乱七八糟的规则。

postcss autoprefixer

CSS 输入

.example {
 display: flex;
 transition: all .5s;
 user-select: none;
 background: linear-gradient(to bottom, white, black);
}

CSS 输出

.example {
 **display: -webkit-box;**
 display: -ms-flexbox;
 display: flex;
 **-webkit-transition:** all .5s;
 transition: all .5s;
 **-webkit-user-select:** none;
 **-moz-user-select:** none;
 **-ms-user-select:** none;
 user-select: none;
 **background: -webkit-linear-gradient(top, white, black);**
 background: linear-gradient(to bottom, white, black);
}

cssnext

这里是一个使用 PostCSS 的 cssnext 插件的例子。它将 CSS 规范标准转换成更兼容的 CSS,这样你就不需要等到浏览器支持才能用。

cssnext postcss

CSS 输入

:root { 
  --red: #d33;
}
a { 
  &:hover {
    color: color(var(--red) a(54%));
  }
}

CSS 输出

**a:hover** { 
  color: **#dd3333;**
  color: **rgba(221, 51, 51, 0.54);**
}

每个分类都有上百个插件,包括图片和字体,校验,语法,更好的可读性等等。如果我们要将它们全部展示一遍的话足够花上一整天。

活跃的开发者

PostCSS 项目 在 Github 上非常活跃和热门,有 10,000 多个 star 和 500 多个 fork。

Github activity </> POSTCSS
# of open issues 20
# of pending pull requests 2
# of commits in the last 30 days 58

总结

正如你看到的,在使用 JavaScript 转换 CSS 方面,PostCSS 是一个强大的工具。它既可以成为预处理器的替代品,也可以和它们一起使用。基于它庞大的插件生态圈,可以更容易的将它推荐给你的开发团队。

你是否已经用上了 PostCSS?如果是的话,请在评论里让我们知道。

相关文章

PostCSS – Transforming Your CSS with JavaScript was last modified: July 13th, 2016 by Brian Jackson.