1.背景介绍
预处理器：
CSS预处理器是一种语言，用来为CSS增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的CSS更见简洁，适应性更强，代码更直观等诸多好处。
我们最常用的预处理器有scss和less。
2.知识剖析
sass背景
Sass诞生于2007年，最早也是最成熟的一款CSS预处理器语言。
现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。目前我们所称的sass一般指语法更为严格和友好的scss。
less背景
2009年开源的一个项目，受Sass的影响较大，使用CSS的语法,在很多流行的框架和工具中已经能经常看到LESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）。
当时SASS和现在的scss不同，采用了缩进作为分隔符来区分代码块，而不是CSS中广为使用的大括号（｛｝）。为了让CSS现有的用户使用起来更加方便，Alexis开发了LESS并提供了类似CSS的书写功能。
3.常见问题
scss和less有什么不同
我们知道scss和less相似，它们都可以使用变量、常量、嵌套、混入、继承等功能，可以更有效有弹性的写出CSS，下面我们看看它们之间的差异。
4.解决方案
A安装
Sass：
sass基于Ruby语言开发而成，
因此安装sass前需要安装Ruby。
Less：
less直接link引入“.less”文件，再引入less.js文件即可。
B变量
sass是以$开头定义的变量，如：
$mainColor: #963;
less是以@开头定义的变量，如：
@mainColor: #963;
C作用域
sass没有局部变量，满足就近原则。
less中{}内定义的变量为局部变量。
作用域和其他程序语言中的作用域非常的相同，
他首先会查找局部定义的变量，如果没有找到，
会像冒泡一样，一级一级往下查找，直到根为止，
D混合（Mixins）
Sass的混合：
sass样式中声明Mixins时需要使用“@mixin”命令，
在选择器调用定义好的Mixins需要使用“@include”。
/*声明一个Mixin叫作“abc”*/
@mixin abc($bg-c:red){
width: 100px;
height:100px;
background-color: $bg-c;
}
/*调用abc Mixins*/
.a{
@include abc();
}
.b{
/*将参数$bg-c的值重定义为blue*/
@include abc(blue);
}
less的混合：
在less中，混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”，就像在当前的“Class”中增加一个属性一样。
/*声明一个Mixin叫作“abc”*/
.abc($bg-c:red){
width: 100px;
height:100px;
background-color: $bg-c;
}
/*调用abc Mixins*/
.a{
.abc();
}
.b{
/*将参数$bg-c的值重定义为blue*/
.abc(blue);
}
两者编译出的值相同：
.a{
width: 100px;
height:100px;
background-color: red;
}
.b{
width: 100px;
height: 100px;
background-color: blue;
}
E嵌套
两则写法相同：
section {
margin:10px;
nav {
height:25px;
a {
color:#0982c1;
&:hover {
text-decoration:underline;
}
}
}
}
F继承
/*sass的继承：@extend*/
.block {
margin: 10px 5px;
padding: 2px;
}
p {
@extend .block;/*继承.block选择器下所有样式*/
border: 1px solid #eee;
}
ul,ol {
@extend .block; /*继承.block选择器下所有样式*/
color: #333;
text-transform: uppercase;
}
/*less的继承：类似于mixins*/
.block {
margin: 10px 5px;
padding: 2px;
}
p {
.block;/*继承.block选择器下所有样式*/
border: 1px solid #eee;
}
ul,ol {
.block; /*继承.block选择器下所有样式*/
color: #333;
text-transform: uppercase;
}
编译后：
//sass
.block,p,ul,ol {
margin: 10px 5px;
padding:2px;
}
p {
border: 1px solid #eee
}
ul,ol {
color:#333;
text-transform:uppercase;
}
//less
.block {
margin: 10px 5px;
padding:2px;
}
p {
margin: 10px 5px;
padding:2px;
border: 1px solid #eee
}
ul,ol {
margin: 10px 5px;
padding:2px;
color:#333;
text-transform:uppercase;
}
G高级语言
sass对条件语句和循环语句的处理要比less语言强大。具有真正的语言处理能力。
6.扩展思考
A还有什么好的预处理器语言？
stylus，2010年产生于Node.js社区,可同时使用缩进和括号写法，写法非常灵活，扩展性与scss相当，高于less，但由于规定过少，可能容易让人混乱。
B我该如何选择css预处理器?
1，Sass诞生是最早也是最成熟的CSS预处理器，有Ruby社区和Compass支持；Stylus早期服务于Node JS项目，在该社区得到一定支持者；LESS出现于2009年，支持者远超于Ruby和Node JS社区；
2，sass和stylus扩展性更强，sass广泛使用于国外，less在国内受众最多。stylus是后起之秀。
3，Sass和LESS语法较为严谨、严密，而Stylus语法相对散漫，其中LESS学习起来更快一些，因为他更像CSS的标准；
4，sass和LESS相互影响较大，其中Sass受LESS影响，已经进化到了全面兼容CSS的SCSS；
5，Sass和LESS都有第三方工具提供转译，特别是Sass和Compass是绝配；
7.参考文献
参考一：CSS预处理器——Sass、LESS和Stylus实践
参考二：SASS用法指南
参考三：为您详细比较三个CSS预处理器（框架）：Sass、LESS和Stylus
参考四：Less中文网
