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.
*.less | *.scss | *.styl | |||||||||
| |||||||||||
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 |
/*均支持CSS风格语法*/h1{ color:#000;} Copy after login | ||
不支持 | /*支持不包含花括号与分号的编写风格,仅通过缩进表示嵌套*/h1 color: #000 Copy after login | |
不支持 | /*支持省略冒号*/h1 color #000 Copy after login |
/*以“@”开头*/@maxWidth:1024px; Copy after login | /*以“$”开头*/$maxWidth:1024px; Copy after login | /*可以以“$”开头,也可无前缀符号直接声明变量*/maxWidth=1024px; Copy after login |
定义变量时,以冒号“:”分隔变量名与变量值 | 以“=”分隔变量名与变量值 | |
与其它语言作用域概念雷同,向上冒泡查找变量 | 无全局变量的概念,后定义的同名变量会完全覆盖先定义的变量 | 同LESS |
Mixins
Mixins are the most powerful feature in the language in the CSS preprocessor.
可以无需特别声明,直接调用某一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 |
嵌套语法是相同的,可以通过大括号“{}”之间的层次关系实现嵌套。也可以使用“&”符号来引用父选择器。 | ||
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 |
无需明确的前缀 | 使用“@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 |
使用关键字“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 |
通过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循环语句 |