一、什么是css预处理器？
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件
二、分类(重点)
Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS
三、优点
提供CSS层缺失的样式层复用机制减少冗余代码 提高样式代码的可维护性四、实现原理
取到 DSL 源代码 的 分析树
将含有 动态生成 相关节点的 分析树 转换为 静态分析树
将 静态分析树 转换为 CSS 的 静态分析树
将 CSS 的 静态分析树 转换为 CSS 代码
五、优缺点
优点：语言级逻辑处理，动态特性，改善项目结构
缺点：采用特殊语法，框架耦合度高，复杂度高
六、具体介绍
（一）sass（重点）
完整内容参考这里
1.sass的安装
sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。安装完成后需测试安装有没有成功,运行CMD输入以下命令： ruby -v//如安装成功会打印ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32] 第二步 gem install sass 安装完成之后，你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中： sass -vSass 3.x.x (Selective Steve)2.编译sass
//单文件转换命令sass input.scss output.css//单文件监听命令sass --watch input.scss:output.css//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：sass --watch app/sass:public/stylesheets3.基本用法
变量 SASS允许使用变量，所有变量以$开头。 $blue : #1875e7; div { color : $blue; } 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。 $side : left; .rounded { border-#{$side}-radius: 5px; } 嵌套 选择器嵌套 //sass写法#main p{ color:#eee; .redbox{ color:#000000 }}//编译后#main p{ color:#eee;}#main p .redbox{ color:#000000} 属性嵌套 //SASS语法，注意在外边加冒号.funy{ font:{ family:fantasy; size:30em; weight:bold; }}//编译后.funy{ font-family:fantasy; font-size:30em; font-weight:bold;} 伪类嵌套--------引用父类 //SASS写法a{ background:black; &:hover{background:red;}}//编译后a{ background:black;}a:hover{background:red;} 混合器（混入） Mixins允许创建一组可以在整个样式表中重复使用的样式，而不需要重新创建非语义类。 //使用@mixin命令，定义一个代码块。 @mixin left { float: left; margin-left: 10px; }//使用@include命令，调用这个mixin。 div { @include left; }给混合器传参
可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。这种方式跟 JavaScript的function很像： @mixin link-colors($normal, $hover, $visited) { color: $normal; //&调用父元素 &:hover { color: $hover; } &:visited { color: $visited; }} //在这里进行调用a { @include link-colors(blue, red, green);}//Sass最终生成的是：a { color: blue; }a:hover { color: red; }a:visited { color: green; } 为什么要使用SASS？它是预处理语言，它为CSS提供缩进语法（它自己的语法）。
它允许更有效地编写代码和易于维护。
它是包含CSS的所有功能的CSS的超集，是一个开源的预处理器，以 Ruby 编码。
它提供了比平面CSS好的结构格式的文档样式。
它使用可重复使用的方法，逻辑语句和一些内置函数，如颜色操作，数学和参数列表。
它是更稳定，强大，与CSS的版本兼容。
它是超集的CSS和基于JavaScript。
它被称为CSS的语法糖，这意味着它使用户更容易阅读或表达的东西更清楚。
它使用自己的语法并编译为可读的CSS。
你可以在更少的时间内轻松地编写CSS代码。
它是一个开源的预处理器，被解释为CSS。
它允许在编程结构中编写干净的CSS。
它有助于编写CSS更快。
它是CSS的超集，帮助设计师和开发人员更有效率和快速地工作。
由于Sass兼容所有版本的CSS，我们可以使用任何可用的CSS库。
可以使用嵌套语法和有用的函数，如颜色操作，数学和其他值。
开发人员需要时间了解此预处理器中存在的新功能。
如果更多的人在同一个网站上工作，那么将使用相同的预处理器。 有些人使用Sass，有些人使用CSS直接编辑文件。 因此，它将变得难以与现场工作。
有机会失去浏览器的内置元素检查器的好处。
更多关于sass的问题见这里
（二）less (了解)
详细内容参考这里
中文版参考
less的变量处理方式为懒加载，所有LESS变量的计算，都是以这个变量最后一次被定义的值为准 less的缺点很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。
（三）stylus
详细内容参考这里
综上所述，我们对Sass、LESS和Stylus做一个简单的对比总结：
1.三者都是开源项目；
2.Sass诞生是最早也是最成熟的CSS预处理器，有Ruby社区和Compass支持；Stylus早期服务器Node JS项目，在该社区得到一定ttdhb；LESS出现于2009年，ttdhb远超于Ruby和Node JS社区；
3.Sass和LESS语法较为严谨、严密，而Stylus语法相对散漫，其中LESS学习起来更快一些，因为他更像CSS的标准；
4.Sass和LESS相互影响较大，其中Sass受LESS影响，已经进化到了全面兼容CSS的SCSS；
5.Sass和LESS都有第三方工具提供转译，特别是Sass和Compass是绝配；
6.Sass、LESS和Stylus都具有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性，而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”称为五大基本特性，各自特性实现功能基本相似，只是使用规则上有所不同；
7.Sass和Stylus具有类似于语言处理的能力，比如说条件语句、循环语句等，而LESS需要通过When等关键词模拟这些功能，在这一方面略逊一层；
参考文章
CSS 后处理器 是对 CSS 进行处理，并最终生成 CSS 的 预处理器，它属于广义上的 CSS 预处理器。
我们很久以前就在用 CSS 后处理器 了，最典型的例子是 CSS 压缩工具（如 clean-css），只不过以前没单独拿出来说过。还有最近比较火的 Autoprefixer，以 Can I Use 上的 浏览器支持数据 为基础，自动处理兼容性问题。
将 源代码 做为 CSS 解析，获得 分析树
对 CSS 的 分析树 进行 后处理
将 CSS 的 分析树 转换为 CSS 代码
优点：使用 CSS 语法，容易进行模块化，贴近 CSS 的未来标准
缺点：逻辑处理能力有限
Rework 是一个 高效、简单、易扩展 并且 模块化 的 CSS预处理器。
它在 2012 年 9 月才发布了第一个版本，是 Stylus 的作者 TJ Holowaychuk 大神挖的新坑。
实际上，他采用的是 CSS 后处理器 的模型，在其之上有一个模仿 Stylus 风格缩进嵌套的工具 styl，其 CSS 预处理器 部分功能是在 Rework 开始工作之前通过 css-whitespace 实现的。
有一些基于 Rework 的样式库，参考了 CSS 标准草案 或 CSS 标准提案，相当于支持了 CSS 的未来标准，如 rework-vars、rework-font-variant、rework-calc、rework-color-function 等。
是不是听起来有点晕？这正说明它的模块化做的非常好，你可以按照实际需要，组合 CSS 框架，比如 Myth。
概括一下 Rework 的特点：JavaScript 中直接操作 CSS 解析对象，扩展方便
可以 自由组合模块，按需定制 CSS 工具库
CSS 后处理器 的模型决定它的模块倾向 CSS 未来标准
除 服务器 端外，也支持在 浏览器 环境运行
Rework 还很年轻，还需要更多的时间积累。
PostCSS 是一个 CSS 后处理器 框架，允许你通过 JavaScript 对 CSS 进行修改。
它的第一个版本发布于 2013 年 11 月，是从 Autoprefixer 项目中抽象出的框架。
它和 Rework 非常相似，但提供了 更高级的 API，更易扩展
它可以在现有 Source Map 的基础上生成新的 Source Map
在 原有 CSS 格式 的保留方面做的更好，便于开发 编辑器插件
比 Rework 更年轻，还只有 Autoprefixer 一个成功案例
其实 Autoprefixer 最初是基于 Rework 做的，但后来作者有更多需求（上面的列表），就造了 PostCSS 这个轮子。