基本的写法区别
less: 标准的css语法 ,有花括号和冒号
h1 {
color: #0982C1;
}
sass: 当然也可以写成上面那样 同时也可以不写花括号
h1
color: #0982c1
stylus: 花括号和冒号都可以不写 比较自由
h1
color #0982C1
变量上的差异
Less 变量都是用@开头的
@maincolor : #092873;
@siteWidth : 1024px;
@borderStyle : dotted;
body {
color: @maincolor;
border: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}
sass变量必须是以$开头
$maincolor : #092873;
$siteWidth : 1024px;
$borderStyle : dotted;
body {
color: $maincolor;
border: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}
stylus的变量就没有那么多限制了 可以是 $,也可以是别的字符
嵌套写法相同
运算符也相同
body {
margin: (14px/2);
top: 50px + 100px;
right: 80 * 10%;
}
继承extend
sass可通过@extend来实现代码组合声明
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
stylus同样也是通过@extend
.message {
padding: 10px;
border: 1px solid #eee;
}
.warning {
@extend .message;
color: #E2E21E;
}
而 less里的继承更像是mixin写法
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
.message;
border-color: green;
}
混合mixin
sass的混合需要通过@include来实现
@mixin error($borderWidth: 2px) {
border: $borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
@ include error(); //这里调用默认 border: 2px solid #F00;
}
less的混合
.error(@borderWidth: 2px) {
border: @borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
.error(); //这里调用默认 border: 2px solid #F00;
}
stylus的混合
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error();
}
参考https://blog.csdn.net/pedrojuliet/article/details/72887490