CSS编译器（Stylus、Sass、Less）安装、使用与区别
“工欲善其事，必先利其器”，优美而吸引人的视觉，需要的是简单、性能强大的样式来实现。刚接触的时候很不适应使用css预 编译器的，因为其中涉及到很多编程性的东西，例如变量、函数等，以为很复杂，而且考虑到项目是经过修修改改而完成的，也基本是一个团队完成的，对于这种团队性的项目开发，前端实践用css预处理器来合作，是一种痛苦，即使不痛苦那也是需要花费非常多的时间来协调合作的。对于预处理器的态度，目前是奔着学习新技术和推动css向前进的思想来学习新玩意。
经过查找和检验总结这篇文章，我基本学会了安装、编译、书写Stylus、Less、Sass，高级书写等，用过Stylus、Sass，打算还是用Sass。
这三款CSS预处理器语言的语法和CSS语法都差不多。
预处理器是一种程序，需要将一种程序的数据转换成另一种程序的数据。它可以帮助我们编写可维护的、与时俱进的代码，也可以减少需要编写的CSS数量，这些工具对于哪些需要大量样式表和样式规则的大型用户界面是非常有帮助的。通俗的说，CSS预处理器用一种专门的编程语言，进行web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。
Stylus：
Stylus，2010年产生，来自于Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如Sass和Less。
Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。
Stylus官网：https://www.zhangxinxu.com/jq/stylus/
Stylus在服务器端的安装是依赖Node JS的环境，也就是说也要先安装Node Js。在Node JS的Command控制面板输入的命令：
安装：
$ npm install stylus
执行命令会帮你安装最新Stylus库，我这里已经安装。
使用：
<style scoped lang="stylus" ref="stylesheet/stylus">
.my_conent
font-size 17px
margin-bottom 60px
.user_header
display flex
flex-direction center
justify-content space-between
align-items center
background-color #FFFFFF
line-height 30px
padding 20px 10px
.user_left
display flex
align-items center
img
border-radius 50%
width 80px
height 80px
<style>
Stylus源文件转译成CSS文件
Stylus具有可执行性，Stylus能将自身转换成CSS。Stylus可以读取自“stdin”输出到“stdout”，因此Stylus可以像下面转译源文件：
$ stylus –compress <some.styl> some.css
Stylus也像Sass一样，同时接受单个文件和整个目录的转译。例如，一个目录名为“css”将在同一个目录编译并输出“.css”文件。
$ stylus css
下面的命令将输出到“./public/stylesheets”：
$ stylus css –out public/stylesheets
还可以同时转译多个文件：
$ stylus one.styl two.styl
如果你的浏览器安装了Firebug，那么可以使用FireStylus扩展。
$ stylus –firebug <path>
Stylus语法
Stylus的语法花样多一些，它的文件扩展名是“.styl”，Stylus也接受标准的CSS语法，但是他也像Sass老的语法规则，使用缩进控制，同时Stylus也接受不带大括号（｛｝）和分号的语法，如下所示：
/*style.styl*/
/*类似于CSS标准语法*/
h1 {
color: #963;
background-color:#333;
}
/*省略大括号（｛｝）*/
h1
color: #963;
background-color: #333;
/*省略大括号（｛｝）和分号（;）*/
h1
color:#963
background-color:#333
在Stylus样式中，你也可以在同一个样式文件中使用不同的语法规则，下面这样的写法也不会报错：
/*style.styl*/
h1 {
color #963
}
h2
font-size:1.2em
Stylus的变量
Stylus样式中声明变量没有任何限定，你可以使用“$”符号开始。结尾的分号（;）可有可无，但变量名和变量值之间的等号（=）是需要的。有一 点需要注意的是，如果我们使用“@”符号开头来声明（0.22.4）变量，Stylus会进行编译，但其对应的值并不会赋值给变量。换句话说，在 Stylus中不要使用“@”符号开头声明变量。Stylus中调用变量的方法和Less、Sass是完全相同的。
/*声明变量*/
mainColor = #963;
siteWidth = 1024px;
$borderStyle = dotted;
/*调用变量*/ | /*转译出来的CSS*/
----------------------------------------+--------------------------------
body | body {
color mainColor | color: #963;
border 1px $borderStyle mainColor | border:1px dotted #963
max-width siteWidth | max-width:1024px;
| }
Stylus还有一个独特功能，不需要分配值给变量就可以定义引用属性：
/*水平垂直居中*/ | /*转译出来的CSS*/
------------------------------------+------------------------------------
#logo | #logo {
position absolute | position:absolute;
top 50% | top:50%;
left 50% | left:50%;
width w = 150px | width:150px;
height h = 80px | height:80px;
margin-left -(w / 2) | margin-left:-75px;
margin-top -(h / 2) | margin-top:-40px;
| }
Stylus的作用域
Stylus虽然起步比较晚，但其作用域的特性和Less一样，可以支持全局变量和局变量。会向上冒泡查找，直到根为止。
Stylus的混合
Stylus中的混合和前两款CSS预处理器语言的混合略有不同，他可以不使用任何符号，就是直接声明Mixins名，然后在定义参数和默认值之间用等号（=）来连接。
/*声明一个Mixin叫作“error”*/
error(borderWidth=2px){
border:borderWidth solid #f00;
color: #f00;
}
/*调用error Mixins*/
.generic-error {
error();/*直接调用error mixins*/
}
.login-error {
error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}
三个示例都将会转译成相同的CSS代码：
.generic-error {
border: 2px solid #f00;
color:#f00;
}
.login-error {
border:5px solid #f00;
color: #f00;
}
Stylus嵌套（Nesting）
CSS预处理器语言中的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量，并且增加了代码的可读性。比如说，我们在CSS中多 个元素有一个相同的父元素，那么写样式会变得很乏味，我们需要一遍一遍的在每个元素前写这个父元素，除非给特定的元素添加类名“class”或者ID。
section {
margin:10px;
}
section nav {
height:25px;
}
section nav a {
color: #0982c1;
}
section nav a:hover {
text-decoration: underline;
}
相反，使用CSS预处理器语言的嵌套特性，我们可以在父元素的大括号（｛｝）里写这些元素。同时可以使用“&”符号来引用父选择器。对于Sass、Less和Stylus这三款CSS预处理器语言的嵌套选择器来说，他们都具有相同的语法：
section {
margin:10px;
nav {
height:25px;
a {
color:#0982c1;
&:hover {
text-decoration:underline;
}
}
}
}
Stylus的继承
Sass和Stylus的继承是把一个选择器的所有样式继承到另个选择器上。在继承另个选择器的样式时需要使用“@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;
}
上面的代码转译成CSS：
.block,p,ul,ol {
margin: 10px 5px;
padding:2px;
}
p {
border: 1px solid #eee
}
ul,ol {
color:#333;
text-transform:uppercase;
}
Stylus的颜色函数
lighten(color, 10%); /* 返回的颜色在'color'基础上变亮10% */
darken(color, 10%); /* 返回的颜色在'color'基础上变暗10% */
saturate(color, 10%); /* 返回的颜色在'color'基础上饱和度增加10% */
desaturate(color, 10%); /* 返回的颜色在'color'基础上饱和度降低10% */
有关于Stylus的颜色函数介绍，请阅读Stylus文档。
下面是Stylus颜色函数的一个简单实例：
color = #0982C1
h1
background color
border 3px solid darken(color, 50%)
从上面展示的部分颜色函数可以告诉我们，Sass、Less和Stylus都具有强大的颜色函数功能，功能特性上都大同小异，只是在使用方法上略有不同。而且他们都具有相同的一个目的，就是方便操作样式中的颜色值。
Stylus的条件语句
Stylus的条件语句的使用和其他编程的条件语句使用基本类似，不同的是他可以在样式去省略大括号（｛｝）：
box(x, y, margin = false)
padding y x
if margin
margin y x
body
box(5px, 10px, true)
Stylus同样可以和else if、else配套使用：
box(x, y, margin-only = false)
if margin-only
margin y x
else
padding y x
Stylus除了这种简单的条件语句应用之外，他还支持后缀条件语句。这就意味着if和unless（熟悉Ruby程序语言的用户应该都知道unless条件，其基本上与if相反，本质上是“(!(expr))”）当作操作符；当右边表达式为真的时候执行左边的操作对象。
例如，我们定义了negative()来执行一些基本的检查。下面我们使用块式条件：
negative(n)
unless n is a 'unit'
error('无效数值')
if n < 0
yes
else
no
接下来，我们利用后缀条件让我们的方法简洁：
negative(n)
error('无效数值') unless n is a 'unit'
return yes if n < 0
no
当然，我们可以更进一步。如这个“n < 0 ? yes : no”可以用布尔代替：“n < 0”。后缀条件适合于大多数的单行语句。如“@import,@charset”混合书写等。当然，下面所示的属性也是可以的：
pad(types = margin padding, n = 5px)
padding unit(n, px) if padding in types
margin unit(n, px) if margin in types
body
pad()
body
pad(margin)
body
apply-mixins = true
pad(padding, 10) if apply-mixins
上面代码转译出来的CSS：
body {
padding: 5px;
margin: 5px;
}
body {
margin: 5px;
}
body {
padding: 10px;
}
Stylus的循环语句
在Stylus样式中通过for/in对表达式进行循环，形式如下：
for [, ] in
例如：
body
for num in 1 2 3
foo num
转译出来CSS
body {
foo: 1;
foo: 2;
foo: 3;
}
下面这个例子演示了如何使用：
body
fonts = Impact Arial sans-serif
for font, i in fonts
foo i font
转译出来的CSS
body {
foo: 0 Impact;
foo: 1 Arial;
foo: 2 sans-serif;
}
Less：
2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，在很多流行的框架和工具中已经能经常看到Less的身影了（例如Twitter的Bootstrap框架就使用了 Less）
根据维基百科上的介绍，其实Less是Alexis，Sellier受Sass的影响创建的一个开源项目。当时Sass采用了缩进作为分隔符来区分代码块，而不是CSS中广为使用的大括号（｛｝）。为了让CSS现有的用户使用起来更佳方便，Alexis开发了Less并提供了类似CSS的书写功能。
LESS的官网：http://lesscss.cn/
Less安装分为两种：客户端和服务器端安装。
客户端安装
我们可以直接在客户端使用“.less”（Less源文件），只需要在官网载一个Javascript脚本文件主“less.js”，然后在我们需要引入Less源文件的HTML的中加入如下代码：
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less">
<script src="文件路径/less.js" type="text/javascript"></script>
需要注意的是：在引入“.less”文件中，“link”的“rel”属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：Less源文件一定要在“less.js”引入之前引入，这样才能保证Less源文件正确编译解析。
服务器端安装
Less在服务器端的使用主要是借助于Less的编译器，将Less源文件编译生成最终的CSS文件，目前常用的方式是利用node的包管理器 （npm）安装Less，安装成功后就可以在Node环境中对Less文件进行编译。如此一来，Less在服务器的安装和Sass的安装有点相似，不同之 处是他们需依赖的环境不一样，Less需要的是Node JS环境，而Sass需要的是Ruby环境，为了让大家能更清晰的知道如何在服务器端安装Less，此处简单的过一下安装过程（本文演示的是在 Window10下的安装方法）。
首先到Node Js的官网下载一个适合Windows系统的安装文件。
在启动的Node Js的Command控制面板直接输入下面的命令：
$ npm install less
执行命令会帮你安装最新Less库，我这里已经安装。
如果您想下载最新稳定版本的Less，还可以尝试在Node JS的Command控制面板输入：
$ npm install less@latest
Less文件的转译成CSS文件
Less文件的转译和Sass文件转译可以说是大同小异，不同之处是Less在安装的Node JS环境下通过其自己的命令来进行转译。
$ lessc style.less
上面的命令会将编译的CSS传递给stdout，你可以将它保存到一个文件中：
$ lessc style.less > style.css
除了上面的命令转译Less源文件之外，现在还有很多第三方开发的工具，比较常见的有：SimpleLess、Less.app、Less编译辅助 脚本-Less2CSS、WinLess和CodeKit.app等，我个人现在常用的是WinLess工具，简单易用，不过在IOS系统下 Less.app和CodeKit.app很好用。
LESS语法
Less是CSS的一种扩展形式，它并没有阉割CSS的功能，而是在现有的CSS语法上，添加了很多额外的功能。就语法规则而言，Less和Sass一样，都是使用CSS的标准语法，只是Less的源文件的扩展名是“.less”，其基本语法类似于：
/*style.less*/
h1 {
color: #963;
background-color: #333;
}
LESS的变量
Less样式中声明变量和调用变量和Sass一样，唯一的区别就是变量名前面使用的是“@”字符：
/*声明变量*/
@mainColor: #963;
@siteWidth: 1024px;
@borderStyle: dotted;
/*调用变量*/ | /*转译出来的CSS*/
----------------------------------------+-------------------------------
body { | body {
color: @mainColor; | color:#963;
border:1px @borderStyle @mainColor; | border:1px dotted #963;
max-width: @siteWidth; | max-width:1024px;
} | }
Less的作用域
Less中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止，同样上面的例子，我们来看看他在Less下所起的变化。
/*LESS样式*/
@color: black;
.scoped {
@bg: blue;
@color: white;
color: @color;
background-color:@bg;
}
.unscoped {
color:@color;
}
转译出来的CSS样式：
.scoped {
color:white;/*白色（调用了局部变量）*/
background-color:blue;
}
.unscoped {
color:black;/*黑色（调用了全局变量）*/
}
Less的混合
在Less中，混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”，就像在当前的“Class”中增加一个属性一样。
不过Less样式中声明Mixins和Sass声明方法不一样，他更像CSS定义样式，在Less可以将Mixins看成是一个类选择器，当然 Mixins也可以设置参数，并给参数设置默认值。不过设置参数的变量名是使用“@”开头，同样参数和默认参数值之间需要使用冒号（：）分隔开。
正如Sass混合是的示例，同样在Less样式中定义一个名叫“error”的Mixin，这个“error”设置了一个参数“@borderWidth”，在没有特别定义外，这个参数的默认值是“2px”：
/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
border:@borderWidth solid #f00;
color: #f00;
}
/*调用error Mixins*/
.generic-error {
.error();/*直接调用error mixins*/
}
.login-error {
.error(5px);/*调用error mixins，并将参数@borderWidth的值重定义为5px*/
}
Less嵌套（Nesting）
CSS预处理器语言中的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量，并且增加了代码的可读性。比如说，我们在CSS中多 个元素有一个相同的父元素，那么写样式会变得很乏味，我们需要一遍一遍的在每个元素前写这个父元素，除非给特定的元素添加类名“class”或者ID。
section {
margin:10px;
}
section nav {
height:25px;
}
section nav a {
color: #0982c1;
}
section nav a:hover {
text-decoration: underline;
}
相反，使用CSS预处理器语言的嵌套特性，我们可以在父元素的大括号（｛｝）里写这些元素。同时可以使用“&”符号来引用父选择器。对于Sass、Less和Stylus这三款CSS预处理器语言的嵌套选择器来说，他们都具有相同的语法：
section {
margin:10px;
nav {
height:25px;
a {
color:#0982c1;
&:hover {
text-decoration:underline;
}
}
}
}
上面的预处理器转译出来的CSS代码和我们开始展示的CSS代码是相同的，非常的方便吧！
Less的继承
Less支持的继承和Sass与Stylus不一样，他不是在选择器上继承，而是将Mixins中的样式嵌套到每个选择器里面。这种方法的缺点就是在每个选择器中会有重复的样式产生。
.block {
margin: 10px 5px;
padding: 2px;
}
p {
.block;/*继承.block选择器下所有样式*/
border: 1px solid #eee;
}
ul,ol {
.block; /*继承.block选择器下所有样式*/
color: #333;
text-transform: uppercase;
}
转译出来的CSS代码：
.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;
}
正如所看到的，上面的代码“.block”的样式将会被插入到相应的你要继承的选择器中，但需要注意的是优先级的问题。
Less颜色函数
lighten(@color, 10%); /* 返回的颜色在@color基础上变亮10% */
darken(@color, 10%); /* 返回的颜色在@color基础上变暗10%*/
saturate(@color, 10%); /* 返回的颜色在@color基础上饱和度增加10% */
desaturate(@color, 10%); /* 返回的颜色在@color基础上饱和度降低10%*/
spin(@color, 10); /* 返回的颜色在@color基础上色调增加10 */
spin(@color, -10); /* 返回的颜色在@color基础上色调减少10 */
mix(@color1, @color2); /* 返回的颜色是@color1和@color2两者的混合色 */
Less的完整颜色函数功能，请阅读Less文档。
下面是Less中如何使用一个颜色函数的简单例子：
@color: #0982C1;
h1 {
background: @color;
border: 3px solid darken(@color, 50%);
}
Less的条件语句
Less的条件语句使用有些另类，他不是我们常见的关键词if和else if之类，而其实现方式是利用关键词“when”。
.mixin (@a) when (@a >= 10) {
background-color: black;
}
.mixin (@a) when (@a < 10) {
background-color: white;
}
.class1 { .mixin(12) }
.class2 { .mixin(6) }
转译出来的CSS：
.class1 {
background-color: black;
}
.class2 {
background-color: white;
}
利用When以及<、>、=、<=、>=是十分简单和方便的。Less并没有停留在这里，而且提供了很多类型检查函数来辅助条件表达式，例如：iscolor、isnumber、isstring、iskeyword、isurl等等。
.mixin (@a) when (iscolor(@a)) {
background-color: black;
}
.mixin (@a) when (isnumber(@a)) {
background-color: white;
}
.class1 { .mixin(red) }
.class2 { .mixin(6) }
转译出来的CSS
.class1 {
background-color: black;
}
.class2 {
background-color: white;
}
另外，Less的条件表达式同样支持AND和OR以及NOT来组合条件表达式，这样可以组织成更为强大的条件表达式。需要特别指出的一点是，OR在Less中并不是or关键词，而是用,来表示or的逻辑关系。
.smaller (@a, @b) when (@a > @b) {
background-color: black;
}
.math (@a) when (@a > 10) and (@a < 20) {
background-color: red;
}
.math (@a) when (@a < 10)，(@a > 20) {
background-color: blue;
}
.math (@a) when not (@a = 10) {
background-color: yellow;
}
.math (@a) when (@a = 10) {
background-color: green;
}
.testSmall {.smaller(30, 10) }
.testMath1 {.math(15)}
.testMath2 {.math(7)}
.testMath3 {.math(10)}
转译出来的CSS
.testSmall {
background-color: black;
}
.testMath1 {
background-color: red;
background-color: yellow;
}
.testMath2 {
background-color: blue;
background-color: yellow;
}
.testMath3 {
background-color: green;
}
Less的循环语句
在Less语言中并没有现在的循环语句，可是像其条件语句一样，通过when来模拟出他的循环功能。
.loopingClass (@index) when (@index > 0) {
.myclass {
z-index: @index;
}
// 递归
.loopingClass(@index - 1);
}
// 停止循环
.loopingClass (0) {}
// 输出
.loopingClass (3);
转译出的CSS
.myclass {z-index: 3;}
.myclass {z-index: 2;}
.myclass {z-index: 1;}
Sass：
Sass是对CSS（层叠样式表）的语法的一种扩充，诞生于2007年，最早也是最成熟的一款CSS预处理器语言，它可以使用变量、常量、嵌套、混入、函数等功能，可以更有效有弹性的写出CSS。Sass最后还是会编译出合法的CSS让浏览器使用，也就是说它本身的语法并不太容易让浏览器识别，因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。
其实现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。
Sass官网地址：http://sass-lang.com
安装
Sass是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样可以正常使用Sass。只是必须先安装Ruby，然后再安装Sass。
首先安装Ruby，如果你使用的是ios系统，那么你的系统已经安装好了Ruby。
下面是windows10系统的安装
到RubyInstaller官网上下载Ruby安装文件（随意选择一个版本）。
在启动的Ruby命令控制面板中输入下面的命令：
gem install sass
执行命令会帮你安装最新Sass库，我这里已经安装。
Sass源文件转译成CSS文件
对于一个项目而言，不太可能只有一个CSS样式文件，如果有多个Sass文件需要监听时，就很有必要的组织一下。默认情况之下，我喜欢把所有的 Sass文件放在“/css/sass”目录中，而生成的CSS文件则直接放在“/css”目录下。现在我们修改一下项目文件目录结构，在“/css”目 录中再创建一个“sass”目录，并把创建的“style.scss”文件移至“/css/sass”目录下。此时监听“css/sass”下的所有 Sass文件时，可以在命令面板中输入如下格式的命令：
$ sass --watch sassFileDirectory:cssFileDirectory
在本例中，冒号前面的“sassFileDirectory”是指“/css/sass”下的“sass”目录，冒号后面的“cssFileDirectory”是指“css”目录，对应的命令就是：
$ sass --watch css/sass:css
回车后，同样可以得到提示信息：
除了使用Ruby的Command控制面板转译Sass之外还可以考虑第三方工具，比如说有名的Compass.app和fire.app。
Sass语法
Sass3.0版本开始使用的是标准的CSS语法，和SCSS可以说是一样的。这样Sass代码转换成CSS代码变得更容易。默认Sass使用“.scss”扩展名。Sass语法规则可以像CSS那样书写：
/*style.sass新版语法规则*/
h1{
color:#936;
background-color:#333;
}
正如你所看到的，在Sass样式中，这样的代码是在简单不过的了。
重要的一点是，Sass也同时支持老的语法，老的语法和常规的CSS语法略有不同，他需要严格的语法，任何的缩进和字符的错误都会造成样式的编译错 误。Sass可以省略大括号（｛｝）和分号（；），完全依靠严格的缩进和格式化代码，而且文件使用“.sass”扩展名，他的语法类似于：
/*style.sass*/
h1
color:#936
background-color: #333
Sass的变量
Sass声明变量必须是“$”开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号（：）分隔开。就像CSS属性设置一样：
/*声明变量*/
$mainColor: #963;
$siteWidth: 1024px;
$borderStyle: dotted;
/*调用变量*/ | /*转译出来的CSS*/
------------------------------------------+------------------------------
body { | body {
color: $mainColor; | color: #963;
border:1px $borderStyle $mainColor; | border:1px dotted #963;
max-width: $siteWidth; | max-width: 1024px;
} | }
Sass的作用域
Sass中作用域在这三款预处理器是最差的，可以说在Sass中是不存在什么全局变量。具体来看下面的代码：
/*Sass样式*/
$color: black;
.scoped {
$bg: blue;
$color: white;
color: $color;
background-color:$bg;
}
.unscoped {
color:$color;
}
先看转译出来的CSS样式：
.scoped {
color:white;/*是白色*/
background-color:blue;
}
.unscoped {
color:white;/*白色（无全局变量概念）*/
}
示例明显的告诉我们，在Sass样式中定义变量，调用变量是没有全局变量一个概念存在，因此在Sass中定义了相同变量名时，在调用之时千万要多加小心，不然会给你的样式带来错误。
Sass的混合
Sass样式中声明Mixins时需要使用“@mixin”，然后后面紧跟Mixins的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用“$”符号开始，而且和参数值之间需要使用冒号（：）分开。
在选择器调用定义好的Mixins需要使用“@include”，然后在其后紧跟你要调用的Mixins名。不过在Sass中还支持老的调用方法，就是使用加号“+”调用Mixins，在“+”后紧跟Mixins名。
一起来看个简单的例子，比如说在你的Sass样式中定义了一个名叫“error”的Mixin，这个“error”设置了一个参数“$borderWidth”，在没特别定义外，这个参数的默认值设置为“2px”：
/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){
border:$borderWidth solid #f00;
color: #f00;
}
/*调用error Mixins*/
.generic-error {
@include error();/*直接调用error mixins*/
}
.login-error {
@include error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}
Sass嵌套（Nesting）
CSS预处理器语言中的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量，并且增加了代码的可读性。比如说，我们在CSS中多 个元素有一个相同的父元素，那么写样式会变得很乏味，我们需要一遍一遍的在每个元素前写这个父元素，除非给特定的元素添加类名“class”或者ID。
section {
margin:10px;
}
section nav {
height:25px;
}
section nav a {
color: #0982c1;
}
section nav a:hover {
text-decoration: underline;
}
相反，使用CSS预处理器语言的嵌套特性，我们可以在父元素的大括号（｛｝）里写这些元素。同时可以使用“&”符号来引用父选择器。对于Sass、Less和Stylus这三款CSS预处理器语言的嵌套选择器来说，他们都具有相同的语法：
section {
margin:10px;
nav {
height:25px;
a {
color:#0982c1;
&:hover {
text-decoration:underline;
}
}
}
}
上面的预处理器转译出来的CSS代码和我们开始展示的CSS代码是相同的，非常的方便吧！
Sass的继承
Sass和Stylus的继承是把一个选择器的所有样式继承到另个选择器上。在继承另个选择器的样式时需要使用“@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;
}
上面的代码转译成CSS：
.block,p,ul,ol {
margin: 10px 5px;
padding:2px;
}
p {
border: 1px solid #eee
}
ul,ol {
color:#333;
text-transform:uppercase;
}
Sass颜色函数
ighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */
darken($color, 10%); /* 返回的颜色在$color基础上变暗10% */
saturate($color, 10%); /* 返回的颜色在$color基础上饱和度增加10% */
desaturate($color, 10%); /* 返回的颜色在$color基础上饱和度减少10% */
grayscale($color); /* 返回$color的灰度色*/
complement($color); /* 返回$color的补色 */
invert($color); /* 返回$color的反相色 */
mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/
这只是Sass中颜色函数的一个简单列表，更多详细的介绍可以阅读Sass文档。
颜色函数可以运用到任何一个元素上，只要其有颜色的属性，下面是一个简单的例子：
$color: #0982C1;
h1 {
background: $color;
border: 3px solid darken($color, 50%);/*边框颜色在$color的基础上变暗50%*/
}
Sass的条件语句
Sass样式中的条件语句和其他编程语言的条件语句非常相似，在样式中可以使用“@if”来进行判断：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
编译出来的CSS：
p {
border: 1px solid;
}
在Sass中条件语句还可以和@else if、@else配套使用：
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
转译出来的CSS：
p {color:green;}
Sass的循环语句
Sass中使用for循环语句需要使用@for，并且配合“from”和“through”一起使用，其基本语法：
@for $var from through {语句块}
我们来看一个简单的例子：
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
转译出来的CSS代码：
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }
在Sass中循环语句除了@for语句之外，还有@each语句和@while语句
@each循环语法：
@each $var in {语句块}
来看个简单的实例：
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
转译出来的CSS
.puma-icon { background-image: url('/images/puma.png'); }
.sea-slug-icon { background-image: url('/images/sea-slug.png'); }
.egret-icon { background-image: url('/images/egret.png'); }
.salamander-icon { background-image: url('/images/salamander.png') }
@while循环使用和其他编程语言类似：
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
转译出来的CSS
.item-6 { width: 12em; }
.item-4 { width: 8em; }
.item-2 { width: 4em; }
总结：
优缺点：
基本语法
- Less 的基本语法属于「CSS 风格」
- Sass、Stylus 相比之下激进一些，利用缩进、空格和换行来减少需要输入的字符
- 不过区别在于 Sass、Stylus 同时也兼容「CSS 风格」代码
嵌套语法
- 三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同
- 区别只是 Sass 和 Stylus 可以用没有大括号的方式书写
变量
- 变量无疑为 CSS 增加了一种有效的复用方式，减少了原来在 CSS 中无法避免的重复「硬编码」
@import
- Less 中可以在字符串中进行插值
- Sass 中只能在使用 url() 表达式引入时进行变量插值
- Stylus 中在这里插值不管用，但是可以利用其字符串拼接的功能实现
混入
- 混入（mixin）应该说是预处理器最精髓的功能之一
- 它提供了 CSS 缺失的最关键的东西：样式层面的抽象
- Less 的混入有两种方式：1.直接在目标位置混入另一个类样式（输出已经确定，无法使用参数）；2.定义一个不输出的样式片段（可以输入参数），在目标位置输出。
继承
- Stylus,Scss使用@extend .father继承父类
- Less 使用&:extend(.father);继承父类
- Sass使用button.father{
@extend .father;
}继承父类
函数
- 三种预处理器都自带了诸如色彩处理、类型判断、数值计算等内置函数
总的来说
-
Less 从语言特性的设计到功能的健壮程度和另外两者相比都有一些缺陷，但用 Less 可以满足大多数场景的需求。
-
但相比另外两者，基于 Less 开发类库会复杂得多，实现的代码会比较脏，能实现的功能也会受到 DSL 的制约。
-
比 Stylus 语义更清晰、比 Sass 更接近 CSS 语法，使得刚刚转用 CSS 预编译的开发者能够更平滑地进行切换。
-
Sass 在三者之中历史最久，也吸收了其他两者的一些优点。
-
从功能上来说 Sass 大而全，语义明晰但是代码很容易显得累赘。
-
主项目基于 Ruby 可能也是一部分人不选择它的理由（Less 开始也是基于 Ruby 开发，后来逐渐转到 less.js 项目中）。
-
Sass 有一个「事实标准」库——Compass，于是对于很多开发者而言省去了选择类库的烦恼，对于提升开发效率也有不小的帮助。
-
Stylus 的语法非常灵活，很多语义都是根据上下文隐含的。
-
基于 Stylus 可以写出非常简洁的代码，但对使用团队的开发素养要求也更高，更需要有良好的开发规范或约定。
-
总的来说，三种预处理器百分之七八十的功能是类似的。
-
Less 适合帮助团队更快地上手预处理代码的开发，而 Sass 和 Stylus 的差异更在于口味。
-
比如有的人喜欢 jQuery 用一个 $做大部分的事，而另一些人觉得不一样的功能就该有明确的语义上的差别。在这里我不会做具体的推荐。当然，每一类css编译器都有自己的优缺点，看情况而定，你们来定。