1、她从何处来——CSS预处理器的产生
2、她长什么样——什么是CSS预处理器
3、她家几姐妹——CSS预处理器分类（Sass、Less、Stylus）
4、如何攻略她——CSS预处理器优缺点
5、如何使用她——CSS预处理器的使用
5.1变量
5.2运算
5.3嵌套
5.4注释
5.5代码的重用：混合、扩展、函数、插入文件
5.6高级用法：条件语句、循环语句、自定义函数
内容
既然叫CSS预处理器，肯定跟CSS有某些不可描述的故事，CSS是一门非程序式的语言，变量×，函数×，SCOPE（作用域）×，条件语句×，在前期进行界面设计时，需要书写大量的、无逻辑、不易维护、不易扩展、不易重复调用的代码，诚然，经验老道的大佬们都会采用公共类名、各类选择器等，但对于老夫这种小白emmm，CSS预处理器就是福音呐——
CSS预处理器的基本思想是：用一种专门的编程语言，为CSS加入一些编程特性，将CSS作为目标生成文件，然后开发者只需要使用这种语言进行编码。在无需考虑浏览器兼容性问题的前提下，使用变量/简单的逻辑程序/函数等在编程语言中的一些基本特性。
3、她家几姐妹——CSS预处理器分类
目前使用最多的三款CSS预处理器：Sass、Less、Stylus，讲真，最后一款，可能因为我还太小白，孤陋寡闻，以致听都没听过，没使用过没有发言权，就不种草了。
3.1Sass
Sass产生：2007年，目前为止，最早最成熟的CSS预处理器，拥有ruby社区与compass框架的支持，受Less影响，已进化到了全面兼容CSS的SCSS
3.2Less
Less产生：2009年，受Sass影响较大，但又使用CSS语法，简单易上手，在ruby社区外支持者远超过Sass，但与Sass相比，编程功能不够，优点仅简单与兼容CSS，但神奇的是：TwitterBookstrap采用Less做底层语言的。
3.3Stylus
Stylus产生：2010年，来自Node.js社区，主要用于给Node项目进行CSS预处理支持。
4.1优点
↑开发速度
↑代码优化效率
代码更通俗易懂》》维护简单便捷
通俗一句旁白：Sass与Less就是CSS里的jQuery
4.2缺点
↓用户体验
↓网页打开速度
需要一定的学习过程
5.1变量（Variables）
无需重复书写：将反复使用的css属性定义为变量，然后通过变量名来引用它们
赋予易懂的变量名：让人一眼看出属性值用途
5.2运算（Operations）
5.2.1数字运算（NumberOperations）
支持数字的加减乘除，取整等（+；-；×；/；%），若必要时会在不同单位间转换值
关系运算（<；>；<=；>=；==；!=）
ps：除法运算与分割符（/）
/在CSS中通常起到分隔数字的用途，SassScript作为CSS语言的拓展当然也支持这个功能，同时也赋予了/除法运算的功能
以下三种情况/将被视为除法运算符号：
p{font:10px/8px;//PlainCSS,nodivision$width:1000px;width:$width/2;//Usesavariable,doesdivisionwidth:round(1.5)/2;//Usesafunction,doesdivisionheight:(500px/2);//Usesparentheses,doesdivisionmargin-left:5px+8px/2px;//Uses+,doesdivision}编译为
p{font:10px/8px;width:500px;height:250px;margin-left:9px;}如果需要使用变量，同时又要确保/不做除法运算而是完整地编译到CSS文件中，只需要用#{}插值语句将变量包裹
p{$font-size:12px;$line-height:30px;font:#{$font-size}/#{$line-height};}编译为
p{font:12px/30px;}5.2.2颜色运算（ColorOperations）
颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值
p{color:#010203+#040506;}//01+04=0502+05=0703+06=09编译为
p{color:#050709;}但使用colorfunctions比计算颜色值更方便一些
p{color:#010203*2;}//01*2=0202*2=0403*2=06编译为:
p{color:#020406;}ps:若颜色值包含alphachannel（rgba或hsla两种颜色值），必须拥有相等的alpha值才能进行运算，因为算术运算不会作用于alpha值
$translucent-red:rgba(255,0,0,0.5);p{color:opacify($translucent-red,0.3);background-color:transparentize($translucent-red,0.25);}编译为
p{color:rgba(255,0,0,0.8);background-color:rgba(255,0,0,0.25);}IE滤镜要求所有的颜色值包含alpha层，而且格式必须固定#AABBCCDD，使用ie_hex_str函数可以很容易地将颜色转化为IE滤镜要求的格式
$translucent-red:rgba(255,0,0,0.5);$green:#00ff00;div{filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr='#{ie-hex-str($green)}',endColorstr='#{ie-hex-str($translucent-red)}');}编译为：
div{filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr=#FF00FF00,endColorstr=#80FF0000);}5.2.3字符串运算（StringOperations）
5.2.4布尔值运算（BooleanOperations）
5.2.5数组运算（ListOperations）
使用listfunctions控制
5.3嵌套（Nested）
5.3.1选择器嵌套
保留Html中的代码结构，默认后代选择器
需子代选择器，则在子代前加>
&表示上一层
5.3.2属性嵌套（NestedProperties）
5.3.3伪类嵌套
5.4注释（Comment）
5.4.1多行注释/**/：完整输出到编译后文件
5.4.2单行注释//：在非compressed压缩模式下会被编译到CSS文件中
ps：插值语句(interpolation)也可写进多行注释中输出变量值：
$version:"1.2.3";/*ThisCSSisgeneratedbyMySnazzyFrameworkversion#{$version}.*/编译为
/*ThisCSSisgeneratedbyMySnazzyFrameworkversion1.2.3.*/5.5代码的重用：混合、扩展、函数、插入文件
5.5.1混合（Mixins）
将部分样式抽出，作为单独定义的模板，被多选择器调用，如某段样式经常用到多个元素时，需重复写多次，则可使用
5.5.1.2带参混合：
ps：无参混合会在CSS中编译同名的class选择器，带参的不会。
5.5.2扩展（Extand）
5.5.3函数（Function）
5.5.4导入文件（@import）
5.6.1条件语句：@if@else
5.6.2循环语句：@for@while
5.6.3自定义函数
参考文献：
我是无处安放的小结：
现在是16:17分，除去中间吃掉的一个半小时，有点困了，emmm，但是，但是，刚刚手贱的认识了Sass的toolkit——Compass，停不下来了，艾玛真香，我快哭了。请容我休息一会，再整理补充~
现在是18:04分，本文最重点的部分还是打算另开一篇，好好盘一番，emmm最重要还是在怎么使用它，但是Sass的用法确实比Less高级那么一丢丢。希望不要太难搞啊~