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中文网