表析LESS、Sass和Stylus的异同

首页
博客园
联系我

前言：CSS预处理语言 .
基本差别 .
基本语法 .
变量与作用域 .
混合（Mixins）.
嵌套实现后代选择器 .
继承 .
条件语句 .
循环语句 .
综合对比 .

留言评论
返回顶部

前言：CSS预处理语言

CSS预处理语言可为CSS增加更多编程特性，以CSS作为目标生成文件。

这些语言可有效提高编程效率，使CSS更加简洁、适应性更强、可读性更加，并使项目更易于维护。

本文将在开发者角度使用表格横向对比的方式客观分析目前主流的CSS预处理语言LESS、Scss、Stylus的异同之处。

不介绍这些语言的安装、编译等内容。默认读者已熟悉CSS并可能已用过以上至少一种CSS预处理语言。

鉴于目前Sass语言有分别以“.sass”和“.scss”为文件名后缀的两套语法规则，本文只介绍Sass3之后的版本，即以Scss表示。

基本差别

	LESS	Scss	Stylus/staɪləs/
后缀名	*.less	*.scss	*.styl
编译方法	均可以通过各自方式在本地编译成.css文件有很多第三方编译工具可以将这些格式的文件编译为.css文件
特别项	可以在HTML文件中引入less.js文件与像引入.css文件一样的方式引入.less文件，通过浏览器进行编译（可能损耗一点点性能）。	需要先安装Ruby

LESS

Scss

Stylus/staɪləs/

后缀名

*.less

*.scss

*.styl

编译方法

均可以通过各自方式在本地编译成*.css文件

有很多第三方编译工具可以将这些格式的文件编译为*.css文件

特别项

可以在HTML文件中引入less.js文件与像引入*.css文件一样的方式引入*.less文件，通过浏览器进行编译（可能损耗一点点性能）。

需要先安装Ruby

基本语法

LESS	Scss	Stylus
/均支持CSS风格语法/ h1{ color:#000; }
不支持	/支持不包含花括号与分号的编写风格，仅通过缩进表示嵌套/ h1 color: #000
不支持	/支持省略冒号/ h1 color #000

变量与作用域

LESS	Scss	Stylus
/以“@”开头/ @maxWidth:1024px;	/以“$”开头/ $maxWidth:1024px;	/可以以“$”开头，也可无前缀符号直接声明变量/ maxWidth=1024px;
定义变量时，以冒号“:”分隔变量名与变量值	以“=”分隔变量名与变量值
与其它语言作用域概念雷同，向上冒泡查找变量	无全局变量的概念，后定义的同名变量会完全覆盖先定义的变量	同LESS

混合（Mixins）

Mixins是CSS预处理器中语言中最强大的特性。

Mixins可以将一部分需重用的样式抽出，只需定义一次，就可被很多选择器重复使用。

LESS	Scss	Stylus
可以无需特别声明，直接调用某一class或id选择器名即可重用该选择器内属性	定义混合需要以“@mixin”开头。引用混合需要以“@include” 开头	无需前缀
均可定义参数与设置参数默认值
/声明混合/ .setColor(@mainC:#000){ color:@mainC; } /直接以默认值调用混合/ .sBox{ .setColor(); } /调用混合且传入自定义参数值/ .bBox{ .setColor(#fff); }	/声明混合/ @mixin setColor($mainC:#000){ color:$mainC; } /直接以默认值调用混合/ .sBox{ @include setColor(); } /调用混合且传入自定义参数值/ .bBox{ @include setColor(#fff); }	/声明混合/ setColor(mainC=#000){ color:mainC; } /直接以默认值调用混合/ .sBox{ setColor(); } /调用混合且传入自定义参数值/ .bBox{ setColor(#fff); }
/编译成CSS后/ .sBox{ color:#000; } .box{ color:#fff; }

嵌套实现后代选择器

LESS	Scss	Stylus
嵌套语法是相同的，可以通过大括号“{}”之间的层次关系实现嵌套。也可以使用“&”符号来引用父选择器。
div{ margin:10px 5px; a{ color:red; &:hover{ color:blue; } } }
div{ margin:10px 5px; } div a{ color:red; } div a:hover{ color:blue; }

继承

LESS	Scss	Stylus
无需明确的前缀	使用“@extend”开始，后面紧跟被继承的选择器
/继承示例/ .block{ display:block; margin:10px; } p{ .block; padding:5px; }	/继承示例/ .block{ display:block; margin:10px; } p{ @extend .block; padding:5px; }
/编译成CSS，相同样式依旧会在每个选择器中重复出现/ .block{ display:block; margin:10px; } p{ display:block; margin:10px; padding:5px; }	/编译成CSS，相同样式会被合并/ .block,p{ display:block; margin:10px; } p{ padding:5px; }

LESS

Scss

Stylus

无需明确的前缀

使用“@extend”开始，后面紧跟被继承的选择器

/*继承示例*/

.block{

  display:block;

  margin:10px;

}

p{

  .block;

  padding:5px;

}

/*继承示例*/

.block{

  display:block;

  margin:10px;

}

p{

  @extend .block;

  padding:5px;

}

/*编译成CSS，相同样式依旧会在每个选择器中重复出现*/

.block{

  display:block;

  margin:10px;

}

p{

  display:block;

  margin:10px;

  padding:5px;

}

/*编译成CSS，相同样式会被合并*/

.block,p{

  display:block;

  margin:10px;

}

p{

  padding:5px;

}

条件语句

LESS	Scss	Stylus
使用关键字“when”实现条件语句	可以使用@if、@else、@else if语句实现判断	与其它编程语言类似，不过可以省略大括号
@type: link; .mixin(@type) when ( @type == link ){ color:blue; } .mixin(@type) when not ( @type == link ){ color:black; }	$type: link; p { @if $type == link { color: blue; } @else { color: black; } }	type: link; p{ if type==link color:blue; else color:black; }
/编译后的CSS/ p {color:blue;}

LESS

Scss

Stylus

使用关键字“when”实现条件语句

可以使用@if、@else、@else if语句实现判断

与其它编程语言类似，不过可以省略大括号

@type: link;

.mixin(@type) when ( @type == link ){

  color:blue;

}

.mixin(@type) when not ( @type == link ){

  color:black;

}

$type: link;

p {

  @if $type == link {

    color: blue;

  }

@else {

    color: black;

  }

}

type: link;

p{

  if type==link

color:blue;

  else

    color:black;

}

/*编译后的CSS*/

p {color:blue;}

循环语句

LESS	Scss	Stylus
通过when模拟循环功能	使用@for关键字，配合“from”和“through”	使用for/in对表达式进行循环
.funClass (@i) when (@i>0){ .item-@{i}{ width:2em@i; } /递归/ .funClass(@i-1); } /停止循环/ .funClass (0) {} /输出*/ .funClass (3);	@for &i from 1 through 3{ .item-#{$i} { width:2em*$i; } }	for i in 1 2 3 .item-{i} width 2em*i
/编译后的CSS/ .item-1{ width:2em; } .item-2{ width:4em; } .item-3{ width:6em; }
	还支持each循环语句、while循环语句

综合对比

均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性；
Scss和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系；
Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念；
Scss和Stylus就具有类似其它语言的条件语句、循环语句等，而LESS需要通过When等关键词模拟这些功能；
Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；
使用LESS时，还可以在引用它的HTML文件中引入从官网下载的“less.js”文件，就可以通过浏览器进行解析。

SS和