预处理器
增加了一些编程的特性
分类
Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS
sass
- ruby
- “变量”、“混合”、“嵌套”、“继承”、“颜色函数”
- Compass
less
- less的变量处理方式为懒加载，所有 LESS 变量的计算，都是以这个变量最后一次被定义的值为准
- js 需要额外的时间来处理代码
stylus
- Node JS
- 语法相对散漫
原理
- 取到 DSL 源代码的分析树
- 将含有动态生成相关节点的分析树转换为静态分析树
- 将 DSL 静态分析树转换为 CSS 的静态分析树
- 将 CSS 的静态分析树转换为 CSS 代码
优点
- 提供样式、复用机制
- 减少冗余代码
- 提高样式代码的可维护性
缺点
- 采用特殊语法
- 框架耦合度高
- 复杂度高
后处理器
原理
- 将源代码做为 CSS 解析，获得分析树
- 对 CSS 的分析树进行后处理
- 将 CSS 的分析树转换为 CSS 代码
分类
- Rework
- PostCSS
优点
- 使用 CSS 语法
- 容易进行模块化
- 贴近 CSS 的未来标准
缺点
逻辑处理能力有限
