写在前面：
众所周知CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域），在前期的界面样式设计时，需要书写大量看似没有逻辑的代码，不方便维护及扩展，也不利于重复调用，尤其对于一些UI设计师等非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码。为了方便前端开发的工作量，sass和less应势而生。.
LESS的介绍
第一个，less是单独的一种文件，可以理解为css的升级版，完全按照css写也没问题，不过它提供了很多便利的东 西， 可以省好多代码量。
第二个，html只认css,所以需要配套一些软件将less解析成css,引用时候，直接引用css 就好。gulp,koala 都是常用的，Koala好像简单且方便一点。 多种方式能平滑的将写好的代码转化成标准的CSS代码。
SASS是什么？
Sass（Syntactically Awesome Style Sheets）是一个相对新的编程语言，Sass为web前端开发而生，可以用它来定 义一套新的语法规则和函数，以加强和提升CSS。通过这种新的编程语言，你可以使用最高效的方式，以少量的代 码创建复杂的设计。它改进并增强了CSS的能力，增加了变量，局部和函数这些特性。而这只使Sass一部分利器！
LESS和Sass的主要不同就是他们的实现方式，LESS是基于JavaScript，所以，是在客户端处理的。
另一方面，Sass是基于Ruby的，然后是在服务器端处理的。
第一部分：Less
// 这种注释不会被编译到CSS文件中
/*这种注释可以编译到CSS文件中*/
【less的基础语法】
1、 声明变量：@变量名 ： 变量值；
使用变量：@变量名;
>>>变量使用的原则：
设置频繁出现的值/后期需要进行批量修改的值/牵扯到数字运算的值，推荐进行变量声明。
>>>less中的变量类型：
在CSS中出现的属性值，都可以在less中用作变量名
①、数值类：不带单位的 123 带单位的 1px
②、字符串类型： 带引号的 "hahaha" 不带引号的 red #ff0000
③、颜色类： red #ff0000 RGB(255,255,0)
④、值列表类型：多个值用逗号或者空格分开 10px solid red
2、混合(Mixins):
①、无参混合
声明：.class{}
使用：在选择器中，使用.class直接调用
②、有参 无默认值 混合
声明：.class(@param){}
使用：：.class(paramValue)
③、有参 有默认值 混合
声明：.class(@param:10px){}
使用：：.class(paramValue) 或者 .class()
>>>如果声明时没有给参数赋默认值，那么调用时必须 赋值，否则报错！
>>>无参混合实际上就是一个普通的class选择器。会被编译到CSS文件中。
而有参混合，在编译时，不会被编译到CSS文件中；
3、Less中的匹配默认：
① 声明：
@pipei(条件一，参数){} @pipei(条件二，参数){} @pipei(@_，参数){}
② 调用：@pipei(条件的值，参数的值){}
③ 匹配规则：
根据调用时输入的条件值，去寻找与之匹配的混合执行；
@_选项不管是否匹配，都会执行。
4、 @arguments特殊变量
在混合中@arguments表示混合传入的所有参数。参数中的多个参数之间用空格分隔。
.border(@width,@style,@color){
border: @arguments; >>border: @width,@style,@color
}
5、less中的加减乘除运算
less中的所有变量和数值，都可以进行+ - * / 运算。
需要注意的是，当颜色进行运算时，红绿蓝分为三组进行运算，组内单独运算，组间互不干涉。
6、less中的嵌套：
less中允许CSS选择器按照HTML代码的结构进行嵌套
section{
>P{}
ul{
&:hover
}
}
①、 less中的选择器，默认是后代选择器。如果需要子代选择，则需要在前面加>
②、 &符号表示所在的上一层选择器。比如上述中的&,表示 section ul:hover
第二部分：Sass
Sass:可以用来开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。
很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。
一、什么是SASS
SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
二、 使用
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）
如果要将显示结果保存成文件，后面再跟一个.css文件名。
SASS提供四个变异风格的选项：
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。
sass --style compressed test.sass test.css
上面的操作完全可以借助考拉软件来实现。
在Sass中：
//注释一：编译时不会被编译到CSS文件中；
/*
注释而二：在非compressed压缩模式下会被编译到CSS文件中。
*/
/*!
注释三：在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
*/
三、基本用法
3.1 变量
SASS允许使用变量，所有变量以$开头。
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
3.2 计算功能
SASS允许在代码中使用算式：
3.3 嵌套
SCSS中的嵌套：选择器嵌套 属性嵌套 伪类嵌套
① 选择器嵌套：ul{li{}}
嵌套默认是后代选择器。如果需要子代选择，则需要在选择器前面加>；
可以在选择器的{}中，使用&表示上一层的选择器
② 伪类嵌套：li{&:hover{}}
在选择器的{}中，使用&配合伪类事件
③ 属性嵌套：font：{size:18px;}
对于属性名有-分隔为多段的属性，可以使用属性嵌套；属性 名的前半部分必须紧跟：然后用{包裹后半部分}
eg:
SASS允许选择器嵌套。比如，下面的CSS代码：
可以写成：
属性也可以嵌套，比如border-color属性，可以写成：
注意，border后面必须加上冒号。
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
四、代码的重用:混合宏、继承、占位符：
① 混合宏:使用@mixin声明混合宏，在其他选择器中使用@include调用混合宏
eg：@mixin hunhe{} .class{@include hunhe};
eg：@mixin hunhe($param){} .class{@include hunhe(value)};
eg：@mixin hunhe($param:value){} .class{@include hunhe()};
>>>声明时可以有参数也可以没有参数。
>>> 调用时可以有赋值也可以没有赋值。
>>> 但是调用时必须符合声明的要求，与LESS混合相同。
优点：可以传参，不会产生同名的class
缺点：调用时会把混合宏中的所有代码copy到选择器中，产生大量的重复代码。
② 继承 ：声明一个普通的class，在其他的选择器中使用extend 继承这个class；
eg: .class1{} .class2{@extend.class1}
优点：将相同的代码提取到并集选择器，减少冗余代码。
缺点：①不能传参，②会生成一个多余的class
③ 占位符 ：使用%声明%占位符，在其他选择器中使用@extend 继承占位符；
%class{ } .class2{@extend %class1}
优点：①将相同的代码提取到并集选择器，减少冗余代码。
②不会生成一个多余的class
缺点： 不能传参
eg:
4.1 继承
SASS允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
border: 1px solid #ddd;
}
class2要继承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size:120%;
}
4.2 Mixin
Mixin有点像C语言的宏（macro），是可以重用的代码块。
使用@mixin命令，定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令，调用这个mixin。
div {
@include left;
}
mixin的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
使用的时候，根据需要加入参数：
div {
@include left(20px);
}
4.3 颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4.4 插入文件
@import命令，用来插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
@import "foo.css";
五、高级用法
5.1 条件语句
if条件结构：
条件结构需要写在选择器里面，条件结构的大括号直接包裹样式属性。
@if 条件{}
@else{}
5.2 循环语句
SASS支持for循环：
@for $i from 1 to $color0{} //不包括10
@for $i from 1 through $color0{} //包括10
while循环：
$i:0;
@while $i<10{
$i:$i+1;
}
each循环遍历:
@each $item in a,b,c,d{
//$item 表示a,b,c,d的每一项
}
5.3 自定义函数
SASS允许用户编写自己的函数。
[本文参考阮一峰有关Sass的相关讲解]