sass和less，优秀的前端样式预处理器

身为切图界的一员，或者说在前端界打滚了一段日子的你，会慢慢地发现，现在的css编写已经不能满足自己的效率。如果有更强大的框架，让你的css更灵活和更容易复用和维护，那该多好啊。很明显，这个早已经不是什么新鲜事，sass和less就是这么2个很优秀的 样式预处理器 ，能让你的效率快速提高。接下来就谈谈它们。

1.样式预处理器的定义

样式预处理器，简单地来概括就是技术大牛通过一门新的语言，让css的编写具备各种变量和属性，你按照它的语法写好后，就能编译，生成相应的css文件。当然这些处理器可以让你的css更简洁，易懂，具备更强的可移植性和维护性。
前端界里面，譬如Sass、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等都是上面所说的样式预处理器。这里不一一介绍，我只说一下比较优秀的sass和less。

2.sass和less这对好基友

 2.1 sass的前世今生

SASS在07到08年就出现了，是对CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别（虽然它和CSS的语法非常的像，几乎一样），因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。

2.2 less的前世今生

度娘告诉我们，LESS是一种由Alexis Sellier设计的动态层叠样式表语言。

LESS是开源的，其第一个版本由 Ruby 写成，但在后续的版本当中，Ruby逐渐被替换为 JavaScript 。受益于JavaScript，LESS可以在客户端上运行（IE6+、Webkit、Firefox），也可以在服务端运行（Node.js、Rhino）。

LESS与CSS较为接近，一个合法的CSS代码段本身也是一段合法的LESS代码段。LESS提供变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制。

3.框架的对比

3.1 实现方式的不一样

LESS和Sass的主要不同就是他们的实现方式，LESS是基于JavaScript，是在客户端处理的。然而，Sass是基于Ruby的，是在服务器端处理的。

很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。但是LESS环境较Sass简单，这也使得不少的童鞋选择LESS。

3.2 语法上的共性

Sass和LESS都使用的是标准的CSS语法。Sass使用“.scss”扩展名，而LESS使用“.less”扩展名。

3.2.1 变量

Sass声明变量必须是“$”开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号（：）隔开。

[css] view plain copy

1. $a: 14px;  
2. $b: #000;  
3. $C: solid  
4. .btn{  
5.   width: $a;  
6.   border: 1px $C $b;  
7. }     

LESS声明变量和Sass声明变量差不多，区别就是变量名前面使用是的“@”字符：

[css] view plain copy

1. @a: 14px;  
2. @b: #000;  
3. @C: solid  
4. .btn{  
5.   width: @a;  
6.   border: 1px @C @b;  
7. }     

3.2.2 嵌套（Class中嵌套class，从而减少重复的代码）

[css] view plain copy

1. body {  
2.   padding: 5px;  
3.   .head{  
4.     height: 10px;  
5.     a {  
6.       color: #000;  
7.       &:hover {  
8.         text-decoration: underline;  
9.       }  
10.     }  
11.   }  
12. }   

SASS和LESS在嵌套语法上基本一样，简单快捷。

3.2.3 混入

在样式预处理器里面，你可以用一个变量，定义一段经常被用到的代码，然后供其他样式引用，方便快捷。这便是混入了。

在SASS里面，

[css] view plain copy

1. @mixin aq($borderWidth: 1px) {  
2.   border: $borderWidth solid #F00;  
3. }  
4. .btn {  
5.   padding: 5px;  
6.   @include aq(2px);  
7. }  

在LESS里面，

[css] view plain copy

1. .aq($borderWidth: 1px) {  
2.   border: $borderWidth solid #F00;  
3. }  
4. .btn {  
5.   padding: 5px;  
6.   .aq(2px);  
7. }  

3.2.4继承

继承和混入有点相似。

在SASS里面，

[css] view plain copy

1. .a {  
2.   margin: 10px 5px;  
3.   padding: 2px;  
4. }  
5. .b{  
6.   @extend .a;   
7.   border: 1px solid #000;  
8. }  

在LESS里面，

[css] view plain copy

1. .a {  
2.   margin: 10px 5px;  
3.   padding: 2px;  
4. }  
5. .b{  
6.   .a;   
7.   border: 1px solid #000;  
8. }  

3.2.5颜色函数

颜色函数是CSS预处里器中内置的颜色函数功能，这些功能可以对颜色值进行处理，对于颜色的变亮、变暗、渐变颜色等处理都挺好用的。

例如在SASS里面，

[css] view plain copy

1. invert($color);     /* 返回$color的反相色 */  
2. lighten($color, 50%); /* 返回的颜色在$color基础上变亮50% */  
3. saturate($color, 50%);   /* 返回的颜色在$color基础上饱和度增加50% */  
4. desaturate($color, 50%); /* 返回的颜色在$color基础上饱和度减少50% */  
5. grayscale($color);  /* 返回$color的灰度色*/  
6. darken($color, 50%);  /* 返回的颜色在$color基础上变暗50% */  

在LESS里面，

[css] view plain copy

1. invert(@color);     /* 返回@color的反相色 */  
2. lighten(@color, 50%); /* 返回的颜色在@color基础上变亮50% */  
3. saturate(@color, 50%);   /* 返回的颜色在@color基础上饱和度增加50% */  
4. desaturate(@color, 50%); /* 返回的颜色在@color基础上饱和度减少50% */  
5. grayscale(@color);  /* 返回@color的灰度色*/  
6. darken(@color, 50%);  /* 返回的颜色在@color基础上变暗50% */  

3.2.6 运算

[css] view plain copy

1. .a{  
2.   padding: (100px/2);  
3.   top: 10px + 100px;  
4.   left: 100px - 50px;  
5.   top: 10 * 10;  
6. }    

其实还有很多细节的东西，有空我再慢慢补充了。

Author: Alone
Antroduction: 高级前端开发工程师
Sign: 人生没有失败，只有没到的成功。