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

身为切图界的一员，或者说在前端界打滚了一段日子的你。会慢慢地发现。如今的css编写已经不能满足自己的效率。

假设有更强大的框架，让你的css更灵活和更easy复用和维护，那该多好啊。非常明显，这个早已经不是什么新奇事，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让浏览能够使用。也就是说它本身的语法并不太easy让浏览器识别(尽管它和CSS的语法很的像，差点儿一样)，由于它不是标准的CSS格式。在它的语法内部能够使用动态变量等。所以它更像一种极简单的动态语言。

2.2 less的前世今生

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

LESS是开源的，其第一个版本号由Ruby写成，但在兴许的版本号其中。Ruby逐渐被替换为JavaScript。受益于JavaScript。LESS能够在client上执行(IE6+、Webkit、Firefox)，也能够在服务端执行(Node.js、Rhino)。

LESS与CSS较为接近，一个合法的CSS代码段本身也是一段合法的LESS代码段。

LESS提供变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制。

3.框架的对照

3.1 实现方式的不一样

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

非常多开发人员不会选择LESS由于JavaScript引擎须要额外的时间来处理代码然后输出改动过的CSS到浏览器。

可是LESS环境较Sass简单。这也使得不少的童鞋选择LESS。

3.2 语法上的共性

Sass和LESS都使用的是标准的CSS语法。

Sass使用“.scss”扩展名，而LESS使用“.less”扩展名。

3.2.1 变量

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

$a: 14px;

$b: #000;

$C: solid

.btn{

width: $a;

border: 1px $C $b;

}

LESS声明变量和Sass声明变量差点儿相同。差别就是变量名前面使用是的“@”字符：

@a: 14px;

@b: #000;

@C: solid

.btn{

width: @a;

border: 1px @C @b;

}

3.2.2 嵌套(Class中嵌套class，从而降低反复的代码)

body {

padding: 5px;

.head{

height: 10px;

a {

color: #000;

&:hover {

text-decoration: underline;

}

}

}

}

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

3.2.3 混入

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

在SASS里面。

@mixin aq($borderWidth: 1px) {

border: $borderWidth solid #F00;

}

.btn {

padding: 5px;

@include aq(2px);

}

在LESS里面。

.aq($borderWidth: 1px) {

border: $borderWidth solid #F00;

}

.btn {

padding: 5px;

.aq(2px);

}

3.2.4继承

继承和混入有点相似。

在SASS里面，

.a {

margin: 10px 5px;

padding: 2px;

}

.b{

@extend .a;

border: 1px solid #000;

}

在LESS里面，

.a {

margin: 10px 5px;

padding: 2px;

}

.b{

.a;

border: 1px solid #000;

}

3.2.5颜色函数

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

比如在SASS里面，

invert($color); /* 返回$color的反相色 */

lighten($color, 50%); /* 返回的颜色在$color基础上变亮50% */

saturate($color, 50%); /* 返回的颜色在$color基础上饱和度添加50% */

desaturate($color, 50%); /* 返回的颜色在$color基础上饱和度降低50% */

grayscale($color); /* 返回$color的灰度色*/

darken($color, 50%); /* 返回的颜色在$color基础上变暗50% */

在LESS里面，

invert(@color); /* 返回@color的反相色 */

lighten(@color, 50%); /* 返回的颜色在@color基础上变亮50% */

saturate(@color, 50%); /* 返回的颜色在@color基础上饱和度添加50% */

desaturate(@color, 50%); /* 返回的颜色在@color基础上饱和度降低50% */

grayscale(@color); /* 返回@color的灰度色*/

darken(@color, 50%); /* 返回的颜色在@color基础上变暗50% */

3.2.6 运算

.a{

padding: (100px/2);

top: 10px + 100px;

left: 100px - 50px;

top: 10 * 10;

}

事实上还有非常多细节的东西，有空我再慢慢补充了。

Author: Alone

Antroduction: 高级前端开发project师

Sign: 人生没有失败，仅仅有没到的成功。