前言：CSS预处理语言
CSS预处理语言可为CSS增加更多编程特性，以CSS作为目标生成文件。
这些语言可有效提高编程效率，使CSS更加简洁、适应性更强、可读性更加，并使项目更易于维护。
本文将在开发者角度使用表格横向对比的方式客观分析目前主流的CSS预处理语言LESS、Sass、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 |
|---|---|---|
/*均支持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 |
|---|---|---|
| 使用关键字“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”文件，就可以通过浏览器进行解析。
时间： 2024-08-09 01:51:55