一、什么是CSS预处理器
CSS预处理器定义了一种新的语言，其基本思想是用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
到目前为止，在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀，本文将对它们进行比较。
二、Sass、LESS和Stylus背景介绍
1. Sass背景介绍
Sass是对CSS（层叠样式表）的语法的一种扩充，诞生于2007年，最早也是最成熟的一款CSS预处理器语言，它可以使用变量、常量、嵌套、混入、函数等功能，可以更有效有弹性的写出CSS。Sass最后还是会编译出合法的CSS让浏览器使用，也就是说它本身的语法并不太容易让浏览器识别，因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。
其实现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。
注：Sass官网地址：http://sass-lang.com
2. LEss背景介绍
2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，在很多流行的框架和工具中已经能经常看到LESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）。
根据维基百科上的介绍，其实LESS是Alexis Sellier受Sass的影响创建的一个开源项目。当时SASS采用了缩进作为分隔符来区分代码块，而不是CSS中广为使用的大括号（｛｝）。为了让CSS现有的用户使用起来更佳方便，Alexis开发了LESS并提供了类似CSS的书写功能。
注：LESS的官网：http://less.bootcss.com/#getting-started
3. Stylus背景介绍
Stylus，2010年产生，来自于Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如Sass和LESS。
Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。
注：Stylus官网：http://stylus-lang.com/
三、Sass、LESS和Stylus区别
语法与变量
LESS的基本语法属于「CSS 风格」，而Sass、Stylus相比之下激进一些，利用缩进、空格和换行来减少需要输入的字符。不过区别在于Sass、Stylus同时也兼容「CSS 风格」代码。多一种选择在更灵活的同时，在团队开发中也免不了增加更多约定来保持风格统一。而对个人而言，语法风格按自己口味选择即可。
LESS:
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
编译为：
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
Sass：
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
编译为：
nav {
width: 100px;
color: #F90;
}
Stylus：
body {
font: 14px/1.5 Helvetica, arial, sans-serif;
#logo {
border-radius: 5px;
}
}
编译为：
body {
font: 14px/1.5 Helvetica, arial, sans-serif;
}
body #logo {
border-radius: 5px;
}
变量作用域
三种预处理器的变量作用域都是按嵌套的规则集划分，并且在当前规则集下找不到对应变量时会逐级向上查找，注意这个和原生CSS的逻辑是完全不同的。
如果我们在代码中重写某个已经定义的变量的值，LESS的处理逻辑和其他两者有非常关键的区别。在LESS中，这个行为被称为「懒加载（Lazy Loading）」。所有 LESS 变量的计算，都是以这个变量最后一次被定义的值为准。
Less：
@size: 10px;
.box {
width: @size;
}
@size: 20px;
.ball {
width: @size;
}
输出：
.box {
width: 20px;
}
.ball {
width: 20px;
}
Stylus：
size = 10px
.box
width: size
size = 20px
.ball
width: size
输出：
.box {
width: 10px;
}
.ball {
width: 20px;
}
Sass 的处理方式和 Stylus 相同，变量值输出时根据之前最近的一次定义计算。这其实代表了两种理念：LESS 更倾向接近 CSS 的声明式，计算过程弱化调用时机；而 Sass 和 Stylus 更倾向于指令式
逻辑控制
Sass 中通过常见的 @if、@else if、@else实现条件分支，通过@for、@each、@while实现循环，配合map和list` 这两种数据类型可以轻松地实现多数编程语言提供的功能。
在 Stylus 中，不需要使用 @ 规则，提供了 if、else if、else、unless、for...in 来实现类似功能，语法比 Sass 更简洁灵活。
Less 中的 mixin 通过「guard」的方式支持简单的条件分支控制。比如我们要实现一个控制 ::placeholder 样式的 mixin，当传入颜色时只设置颜色，当传入声明块时输出对应的样式规则，其他情况输出一个默认的 color
四、总结
我个人认为，三种预处理器百分之七八十的功能是类似的。LESS 适合帮助团队更快地上手预处理代码的开发，而 Sass 和 Stylus 的差异更在于口味。比如有的人喜欢 jQuery 用一个 $ 做大部分的事，而另一些人觉得不一样的功能就该有明确的语义上的差别。在这里我不会做具体的推荐。
最后，感谢大家的阅读，本文并不全面，有问题的地方大家多多包涵，么么哒..:kissing::kissing:
