CSS预编译工具（SASS，LESS）

  SASS和LESS都是专用于CSS的预编译语言，他们2者的功能，操作都是大同小异。LESS稍微简单一些，而SASS有一些比较成熟的框架（如compass），功能强大一些，其中的语法也比较符合一门编程语言的习惯，比如说函数，作用域，进程控制等等。所以，我也是选择的SASS来使用。
一、SASS中文官网
使用：
创建一个SCSS后缀的文件。
变量：
$name :       定义变量 
直接调用$name引用变量
嵌套的CSS规则：
导入：@import
处理.SASS文件和.SCSS文件的相互转换
sass和scss是SASS的两种不同的语法，我们一般使用scss语法
注释：
//      不会编译进css文件
/**/    会编译进css文件
混合器：
@mixin 
@include
编译复杂混合属性用（如：font，background）
继承：
@extend
占位选择符：

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

.notice {
  @extend %extreme;
}

编译为：

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; 
}

注：继承最好不要继承被包含的子选择器，编译出来后会把包含关系交叉写的非常复杂，可读性很差。
流程控制：
@if
@if - @else
@if - @else if - @else
@for $var from through      ---- 包括开始与结束
@for $var from to      ---- 包括开始，不包括结束
@each $var in
@while condition {statements;}
函数：
@function fn(args) {
// statements
@return exp;
}

二、Less中文文档

略

SASS和LESS都需要通过编译后成为CSS文件才能使用，编译工具有很多种，下面推荐2种我常用的：

1、Koala

一款可视化的前端预处理器语言图形编译工具，优点是操作比较简便，可以批量操作，轻松设置各种参数。

2、gulp插件

gulp插件是非常多且功能强大的，其中不乏SASS和LESS的编译工具。优点是不需要装新的软件，而且找起来很方便。缺点是需要自己手写参数。