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），这时使用继承再合适不过了。

扫描二维码关注公众号，回复： 7531902 查看本文章

与混合器相比，继承生成的 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

Less

Sass

何时使用继承？

总结

猜你喜欢

　　何时使用继承？