Rework：CSS预处理器插件框架

在你日常的前端开发中，是不是经常被CSS的各种兼容性问题搞得头大？别担心，我来给你介绍一个神器——Rework。这个工具可以说是CSS预处理的好帮手，尤其是在Node.js环境下，它能让你的CSS处理变得更加顺畅。

什么是Rework？

简单来说，Rework是一个插件框架，专门用于Node.js中的CSS预处理。它的核心功能就是帮助开发者自动化处理CSS，比如自动添加厂商前缀、创建自定义属性、内联图像等。总之，只要你能想到的CSS操作，Rework基本都能帮你搞定。

如何安装Rework？

安装Rework非常简单，只需要在你的项目目录下运行以下命令：

    bash
    npm install rework

这样就可以把Rework安装到你的项目中了。

Rework的使用方法

好啦，安装完了，我们来看看怎么用它。假设你有一段简单的CSS代码：

    css
    body { font-size: 12px; }

你可以这样使用Rework来处理它：

    javascript
    var rework = require('rework');
var pluginA = require('pluginA');
var pluginB = require('pluginB');

rework('body { font-size: 12px; }', { source: 'source.css' })
  .use(pluginA)
  .use(pluginB)
  .toString({ sourcemap: true });

在这个例子中，我们通过rework函数创建了一个新的Rework实例，然后使用了两个插件pluginA和pluginB，最后将处理后的CSS转换为字符串。

Rework的API

Rework的API设计得非常简洁易用。以下是一些常用的方法：

rework(code, [options])：接受一段CSS字符串并返回一个新的Rework实例。options会直接传递给css.parse。
Rework#use(fn)：使用指定的插件fn。插件就是一个接受样式表根节点和Rework实例的函数。
Rework#toString([options])：返回处理后的CSS字符串。options会直接传递给css.stringify。

Rework的插件

Rework拥有丰富的插件和混入功能。以下是一些特别值得注意的插件：

at2x：提供高分辨率图像支持。
calc：解决简单的calc()表达式。
colors：提供颜色辅助功能，比如rgba(#fc0, .5)。
ease：提供多种额外的缓动函数。
extend：支持extend: selector。
function：用户自定义CSS函数。
import：通过@import读取并内联CSS。
inline：将资源内联为数据URI。
mixin：通过混入实现自定义属性逻辑。
npm：使用Node的模块解析器内联CSS。
references：支持属性引用，比如height: @width。
url：使用给定的函数重写url()。
variables：支持W3C风格的变量。

结语

在我看来，Rework是一个非常强大的工具，尤其适合那些需要在Node.js环境下进行CSS预处理的开发者。它不仅功能丰富，而且插件生态也非常完善，几乎可以满足你对CSS处理的所有需求。如果你还没试过Rework，那就赶紧动手试试吧！