横向比照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 = #0982C1h1  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中使用这些复杂的逻辑，会添加代码的维护难度，所以在项目开发中很少使用条件语句和循环语句，