Home > Web Front-end > HTML Tutorial > Analysis of similarities and differences between LESS, Sass and Stylus_html/css_WEB-ITnose

Analysis of similarities and differences between LESS, Sass and Stylus_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:59:13
Original
1206 people have browsed it

Preface: CSS preprocessing language

CSS preprocessing language can add more programming features to CSS and generate files with CSS as the target.

These languages ​​can effectively improve programming efficiency, make CSS more concise, adaptable, and readable, and make projects easier to maintain.

This article will objectively analyze the similarities and differences between the current mainstream CSS preprocessing languages ​​LESS, Sass, and Stylus from a developer's perspective using a horizontal comparison of tables.

Does not introduce the installation, compilation, etc. of these languages. By default, readers are already familiar with CSS and may have used at least one of the above CSS preprocessing languages.

Since the Sass language currently has two sets of grammar rules with ".sass" and ".scss" as file name suffixes, this article only introduces the versions after Sass3, which are represented by Scss.

Basic difference

LESS Scss Stylus/sta?l?s/ Suffix name Compilation method Special Item
*.less *.scss *.styl
  LESS Scss Stylus/sta?l?s/ 后缀名 编译方法 特别项
*.less *.scss *.styl

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

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

可以在HTML文件中引入less.js文件与像引入*.css文件一样的方式引入*.less文件,通过浏览器进行编译(可能损耗一点点性能)。 需要先安装Ruby  
All are acceptable Compile locally into *.css files through their own methods There are many third-party compilation tools that can compile files in these formats into *.css files

can introduce less.js files into HTML files and introduce *.less files in the same way as *.css files, and compile them through the browser (which may consume a little performance). Ruby needs to be installed first

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

Basic syntax

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

Variables and Scope

Mixins

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

Mixins can extract some styles that need to be reused. They only need to be defined once and can be reused by many selectors.

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

Nested implementation of descendant selectors

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

条件语句

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;}
Copy after login
$type: link;p {  @if $type == link {    color: blue;  } @else {    color: black;  }}
Copy after login
type: link;p{  if type==linkcolor:blue;  else    color:black;}
Copy after login
/*编译后的CSS*/p {color:blue;}
Copy after login

循环语句

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);
Copy after login
@for &i from 1 through 3{  .item-#{$i} {    width:2em*$i;  }}
Copy after login
for i in 1 2 3  .item-{i}    width 2em*i
Copy after login
/*编译后的CSS*/.item-1{  width:2em;}.item-2{  width:4em;}.item-3{  width:6em;}
Copy after login
  还支持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”文件,就可以通过浏览器进行解析。

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template