横向对比Sass、Less和Stylus的共同特性
本文目录：
1.Sass、LESS和Stylus的基本语法
2.变量（Variables）
3.作用域（Scope）
4.混合(Mixins)
5.嵌套（Nesting）
6.继承（Inheritance）
7.颜色函数
8.导入（Import）
9.条件语句和循环语句
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
1.Sass、LESS和Stylus的基本语法
这三种都没有阉割css的基本语法，也就是说，即使在项目中使用这三种预处理器的任意一种，也完全可以正常书写css，
一个需要注意的地方是，Stylus可以省略花括号和分号。
重点是分析一下这三款预处理器语言的一些相同的特性：
2.变量（Variables）
sass
Sass声明变量必须是“$”开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号（：）分隔开。就像CSS属性设置一样：
/*声明变量*/
$mainColor: #963;
/*调用变量*/
body {
color: $mainColor;
}
less
LESS样式中声明变量和调用变量和Sass一样，唯一的区别就是变量名前面使用的是“@”字符
stylus
在stylus可以以$开头，也可以不用任何符号，注意不要用@，另外调用方法也和less、sass是完全相同的
3.作用域（Scope）
sass、less和stylus中的作用域和其他程序语言中的作用域非常的相同，首先都会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止。（sass是3.4版本之后才有了全局变量和局部变量这个概念），下面以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;/*黑色（调用了全局变量）*/
}
4.混合(Mixins)
Mixins是CSS预处理器中语言中最强大的特性，简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。
sass的混合
Sass样式中声明Mixins时需要使用“@mixin”，然后后面紧跟Mixins的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用“$”符号开始，而且和参数值之间需要使用冒号（：）分开。
在选择器调用定义好的Mixins需要使用“@include”，然后在其后紧跟你要调用的Mixins名。不过在Sass中还支持老的调用方法，就是使用加号“+”调用Mixins，在“+”后紧跟Mixins名。
/*声明一个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*/
}
less的混合
和sass相比，less的混合可以直接把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*/
}
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代码
5.嵌套（Nesting）
CSS预处理器语言中的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量，并且增加了代码的可读性。
在三款预处理器语言中我们都可以通过在父元素的大括号（｛｝）里写子元素的样式。同时可以使用“&”符号来引用父选择器，唯一的不同就是stylus可以省略花括号。
6.继承（Inheritance）
Sass和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;
}
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;
}
7.颜色函数
颜色函数是CSS预处理器语言中内置的颜色函数功能，这些功能可以对颜色进行处理，例如颜色的变亮、变暗、饱和度控制、色相控制，渐变颜色等处理十分的方便。
Sass颜色函数
lighten($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中颜色函数的一个简单列表，详情参阅官方文档
颜色函数可以运用到任何一个元素上，只要其有颜色的属性，下面是一个简单的例子：
$color: #0982C1;
h1 {
background: $color;
border: 3px solid darken($color, 50%);/*边框颜色在$color的基础上变暗50%*/
}
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中如何使用一个颜色函数的简单例子：
@color: #0982C1;
h1 {
background: @color;
border: 3px solid darken(@color, 50%);
}
Stylus的颜色函数
lighten(color, 10%); /* 返回的颜色在'color'基础上变亮10% */
darken(color, 10%); /* 返回的颜色在'color'基础上变暗10% */
saturate(color, 10%); /* 返回的颜色在'color'基础上饱和度增加10% */
desaturate(color, 10%); /* 返回的颜色在'color'基础上饱和度降低10% */
下面是Stylus颜色函数的一个简单实例：
color = #0982C1
h1
background color
border 3px solid darken(color, 50%)
从上面展示的部分颜色函数可以告诉我们，Sass、LESS和Stylus都具有强大的颜色函数功能，功能特性上都大同小异，只是在使用方法上略有不同。而且他们都具有相同的一个目的，就是方便操作样式中的颜色值。
8.导入（Import）
在CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加http的请求。但是在CSS预处理器中的导入(@import)规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。如果你是通过“@import ‘file.css’”导入“file.css”样式文件，那效果跟普通CSS导入样式文件一样。注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突。
Sass、LESS和Stylus三款CSS预处理器语言，导入样式的方法都是一样：
/* file.{type} */
body {
background: #EEE;
}
需要导入样式的文件：
@import "reset.css";
@import "file.{type}";
p {
background: #0982C1;
}
转译出来的CSS代码：
@import "reset.css";
body {
background: #EEE;
}
p {
background: #0982C1;
}
9.条件语句和循环语句
条件语句
sass和stylus都支持if和else if条件语句，less则比较奇葩，实现方式是利用关键词“when”
循环语句
Sass和Stylus还支持for循环语句，而LESS并没支持for循环语句，但值得庆幸的是，在LESS中可以使用When来模拟出for循环的特性。
综合来说，在条件语句和循环语句这方面讲，sass和stylus更像是一门编程语言，但是因为这些逻辑操作往往都是交给js来完成，同时在css中使用这些复杂的逻辑，会增加代码的维护难度，所以在项目开发中很少使用条件语句和循环语句，
发表评论 (审核通过后显示评论)：