Less & Sass 的区别

Less

　　CSS?预处理语言。扩展了?CSS?语言，增加了嵌套、变量、混合(Mixins)、函数等特性，使 CSS?更易维护和扩展。

　　Less?基于?JavaScript，?是在客户端处理的。

// 变量：

@width: 10px;

#header{
    width: @width
}

// 混合器：Mixins     可以传递参数

.bordered (@normal,@hover) {
　　&:hover { color: @hover }
　　
    color: @normal;
    border-top: 1px solid blue; 
    border-bottom: 1px solid red;
}

.notice{
    color: #111;
    .bordered(blue,red)
　　
　　// 解析出：
　　// .notice { color: blue; border-top: 1px solid blue; border-bottom: 1px solid red; }
　　// .notice:hover { color: red }
}

?

Sass

　　CSS?预处理语言。增加了嵌套、变量、混合(Mixins)、

　　Sass?基于?Ruby?语言，?是在服务器端处理的。因此安装?sass?前需要安装?Ruby。

// 变量:

$width: 80px;

#header{
    width: $width
}

　　　　Sass?中，变量可以在 CSS 规则块定义之外存在。当变量定义在?CSS?规则块内，那么该变量只能在此规则块内使用。如：

.nav{
    $width: 100px;  // 变量定义在规则块内，所以只能在此规则块内使用。
    width: $width；
}

?

//  混合器：Mixins       可以传递参数

@mixin bordered ($normal,$hover,$visited){
　　$:hover { color: $hover }　　
　　$:visited { color: $visited; }
　　
　　color: $normal
    border-top: 1px solid blue; 
    border-bottom: 1px solid red;
}

.notice{
    color: #111;
    @include bordered(blue,red,green);

　　// 解析出： 　　// .notice { color: blue,border-top: 1px solid blue; border-bottom: 1px solid red }
　　// .notice:hover { color: red }
　　// .notice:visited { color: green }
}

?

　　继承：（LESS中也有继承，只是此文未写出。）

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
  // 解析出：
  // class="seriousError error"    
}

　　不仅会继承 .error 自身的所有样式，任何跟 .error 有关的组合选择器样式也都会被 .seriousError 以组合选择器的形式继承 。如下代码：

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

　　何时使用继承？

　　混合器主要用于展示样式的重用，而类名用于语义化样式的重用。因为继承是基于类的（有时是基于其他类型的选择器），所以继承应该是建立在语义化的关系上。当一个元素拥有的类（比如说 .seriousError）表明它属于另一个类（比如说 .error），这时使用继承再合适不过了。

• 与混合器相比，继承生成的 css 代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的 css 体积更小。如果你非常关心你站点的速度，请牢记这一点。
• 继承遵从 css 层叠的规则。当两个不同的 css 规则应用到同一个 html 元素上时，并且这两个不同的 css 规则对同一属性的修饰存在不同的值，css 层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

　　而混合器本身不会引起 css 层叠的问题，因为混合器 把样式直接放到了 css 规则中，而继承存在样式层叠的问题。被继承的样式会保存原有定义位置和选择器权重不变。

?

总结

Less?和?Sass 的 区别：

　　1、实现方式不同。Less? 是基于?JavaScript，在客户端处理；?Sass?基于Ruby，在服务器端处理。

　　　　很多开发者不会选择?LESS?因为?JavaScript?引擎需要额外的时间来处理代码，然后输出修改过的?CSS?到浏览器。关于这个有很多种方式来解决。

　　a、在开发环节使用LESS。一旦完成了开发，就复制粘贴 LESS 输出的样式到一个压缩器，然后到一个单独的?CSS?文件来替代?LESS?文件。

　　b、使用?LESS.app? 来编译?和?压缩你的?LESS?文件。

　　两个选择都将最小化你的样式输出，而从避免由于用户的浏览器不支持?JavaScript?而可能引起的任何问题。尽管这不大可能，但终归是有可能的。（此处原文：LESS?与?SASS?的区别）

　　2、变量。?Less?用 @，?Sass用 $

　　3、混合器。Less?用 .name{}? .className{ .name() }? 、?Sass?用 @mixin? name {}? ? ?. className{ @include name }

　　(注：Less? 和?Sass?的混合器都可以带参数)

　　4、输出设置。LESS 没有输出设置，Sass 提供了四种输出选项：nested / expanded / compact / compressed

　　5、控制指令。Sass?提供了控制指令，?而?Less?不支持。

　　　　Sass?控制指令：if? /? @if {} @else if {} /? @for? / @each? /? @while?