欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

表析LESS、Sass和Stylus的异同_html/css_WEB-ITnose

程序员文章站 2022-05-06 21:45:49
...

前言: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==linkcolor: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循环语句

综合对比

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