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

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;}
不支持	/*支持不包含花括号与分号的编写风格，仅通过缩进表示嵌套*/h1 color: #000
不支持		/*支持省略冒号*/h1 color #000

Basic syntax

LESS Scss Stylus

/*以“@”开头*/@maxWidth:1024px;	/*以“$”开头*/$maxWidth:1024px;	/*可以以“$”开头，也可无前缀符号直接声明变量*/maxWidth=1024px;
定义变量时，以冒号“:”分隔变量名与变量值		以“=”分隔变量名与变量值
与其它语言作用域概念雷同，向上冒泡查找变量	无全局变量的概念，后定义的同名变量会完全覆盖先定义的变量	同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);}	/*声明混合*/@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;}

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;    }  }}

div{  margin:10px 5px;}div a{  color:red;}div a:hover{  color:blue;}

Nested implementation of descendant selectors

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;}

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;}	$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”文件，就可以通过浏览器进行解析。