简述

任何一个工具在参与到大型项目的时候，都需要被工程化，主要体现在两个方面：

1. 全局数据尽量不修改，就算要修改也要通知使用数据的“客户”
2. 局部数据之间相互不影响、不污染

工程化的几个工具

1. SASS

Sass 是成熟、稳定、强大的 CSS 扩展语言。依赖Ruby，所以使用Sass都需要安装Ruby，有点麻烦，不过自从有了webpack这样的构建工具，可以通过插件处理。

SCSS，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法，例如：古老的 IE filter 语法。

2. LESS

Less is more.

Less 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数。

Less 可以在浏览器环境运行，也可以借助NodeJS运行在服务器端，换句话说可以通过webpack构建打包。

3. Stylus

Stylus和Sass、Less一样，都是预处理语言。

Stylus 可以让CSS可编程化，赋予CSS 变量、混写、函数、流程控制

4. PostCSS

PostCSS 是一个允许使用 JS 插件转换样式的工具。

PostCSS 会把样式文件解析成抽象语法树（AST），然后使用插件处理这个语法树并输出最终结果。

PostCSS 一般不单独使用，而是与已有的构建工具进行集成。PostCSS 与主流的构建工具，如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后，选择满足功能需求的 PostCSS 插件并进行配置。

参考

It's Time for Everyone to Learn About PostCSS
PostCSS 基本用法