sass、less、stylus区别

sass、less、stylus

1、插值

sass

$version: "1.2.3";
#{$version}{
}

less

@my-selector: banner;
.@{my-selector} {
}

2、变量命名

sass

$version: "1.2.3";

less

@version: "1.2.3";

stylus

version: "1.2.3";

3、全局声明

sass

!global 声明

4、混合

Sass

@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  @ include error(); /* Applies styles from mixin error */
}
.login-error {
  @ include error(5px); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/
}

Less

.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  .error(); /* Applies styles from mixin error */
}
.login-error {
  .error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */
}

Stylus

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  error(); /* Applies styles from mixin error */
}
.login-error {
  error(5px); /* Applies styles from mixin error with argument borderWidth equal to 5px */
}

5、继承

sass/stylus: @extend .error;

.error {
  border: 1px #f00;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

less : &:extend(.error);

.error {
  border: 1px #f00;
}
.seriousError {
   .error;
  border-width: 3px;
}

6、循环

sass

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//解析为
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

less

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}

div {
  .loop(5); // launch the loop
}

//解析为
div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

7、编译

sass通过ruby编译

less通过·javascript编译

8、一些跟具体浏览器相关的处理

这是宣传使用预处理的原因之一，并且是一个很好的理由，这样可以节省的大量的时间和汗水。创建一个mixin来处理不同浏览器的CSS写法是很简单的，节省了大量的重复工作和痛苦的代码编辑。

Sass

@mixin border-radius($values) {
  -webkit-border-radius: $values;
     -moz-border-radius: $values;
          border-radius: $values;
}
 
div {
  @ include border-radius(10px);
}

Less

.border-radius(@values) {
  -webkit-border-radius: @values;
     -moz-border-radius: @values;
          border-radius: @values;
}
 
div {
  .border-radius(10px);
}

Stylus

border-radius(values) {
  -webkit-border-radius: values;
     -moz-border-radius: values;
          border-radius: values;
}
 
div {
  border-radius(10px);
}

编译结果：

div {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}