sass、less、stylus的区别

基本的写法区别
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

sass、less、stylus的区别

猜你喜欢