Sass和Less的区别

本人刚刚接触这些新框架，如果错误请提出，我也好改正，谢谢。

例子是借鉴别的大神，我是一边学习一边写的，加了一些自己的理解进去。

1.变量

Sass             | Less
-----------------+-----------------
$color: red;     | @color: red;
div {            | div {
  color: $color; |   color: @color;
}                | }</span>

在定义变量和引用变量上Sass用的是$符号，而Less用的是@符号，但是用法相同。

但是两种语言在定义变量上的范围还是有区别的，如下：

Sass                     | Less
-------------------------+-----------------
$color: black;           | @color: black;
.scoped {                | .scoped {
  $bg: blue;             |   @bg: blue;
  $color: white;         |   @color: white;
  color: $color;         |   color: @color;
  background-color: $bg; |   background-color: @bg;
}                        | }
.unscoped {              | .unscoped {
  color: $color;         |   color: @color;
  // Would be an error   |   // Would be an error
  // background: $bg;    |   // background: @bg;
}                        | }</span>

同样的代码，输出的结果却不同：

Sass Output                 | Less Output
----------------------------+----------------------------
.scoped {                   | .scoped {
  color: white;             |   color: white;
  background-color: blue;   |   background-color: blue;
}                           | }
.unscoped { color: white; } | .unscoped { color: black; }</span>

         可以发现Sass在unscoped里面真正引入的color值是white，而Sass里的white是前面scoped中重新定义的color变量，并且在scoped的background-color属性中引入的color也变成了white而不是black，笔者个人认为定义方式是类似同名变量重新赋值，使得color的值由black变成white。
         而Less在scoped引入的值是自身局部里定义的color，作用范围仅限于整个scoped，而unscoped里没有重新定义color，只是引用了color，所以就引用的是属性为black的全局变量color。

2.嵌套选择器

Sass和Less的 &选择器允许在父标签中嵌套使用。

Sass               | Less
-------------------+-----------------
p {                | p {
  a {              |   a {
    color: red;    |     color: red;
    &:hover {      |     &:hover {
      color: blue; |       color: blue;
    }              |     }
  }                |   }
}                  | }</span>

         两者的用法相同，不多说。

3.Mixins

Sass                              | Less
----------------------------------+----------------------------------
@mixin bordered {                 | .bordered {
  border-top: dotted 1px black;   |   border-top: dotted 1px black;
  border-bottom: solid 2px black; |   border-bottom: solid 2px black;
}                                 | }
                                  | 
#menu a {                         | #menu a {
  @include bordered;              |   .bordered;
}                                 | }</span>

        Sass中需要将bordered标记为mixin，在menu的a标签中引入bordered属性要加@include。

        Less中直接创建一个bordered选择器，然后在a标签中直接引入。

4.含参数的Mixins/动态Mixins

Sass                              | Less
----------------------------------+----------------------------------
@mixin bordered($width: 2px) {    | .bordered(@width: 2px) {
  border: $width solid black;     |   border: @width solid black;
}                                 | }
                                  | 
#menu a {                         | #menu a {
  @include bordered(4px);         |   .bordered(4px);
} 

         这点Sass和Less相似，都是在选择器内加参数，调用时传新参数时会在当前调用的标签或者选择器中覆盖原来的参数并使用。

5.选择器的继承

在Less中不允许选择器的继承，所以如下是Sass的介绍：

Sass                        | Less  | CSS Output
----------------------------+-------+---------------------------
.bordered {                 |  N/A  | .bordered, #menu a {
  border: 1px solid back;   |       |   border: 1px solid back; }
}                           |       |
                            |       |
#menu a {                   |       |
  @extend .bordered;        |       |
}                           |       |

这里很明显的看到用@extend让a标签继承了bordered选择器的属性，使它拥有bordered选择器的所有属性。