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 }
    */          
}

　　继承：

　　　　extend 是 Less 的一个伪类。它可以继承所匹配声明中的全部样式。

.animation{
    transition: all .3s ease-out;
    .hide{
    　　transform:scale(0);
    } 
}

#main{
     &:extend(.animation);
}
#con{
    &:extend(.animation .hide);
}
    
 /* 生成后的 CSS */
.animation,#main{
    transition: all .3s ease-out;
}
 .animation .hide , #con{
     transform:scale(0);
}

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 }
    */
}

　　继承：

/* 通过选择器继承继承样式 */
.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：　　嵌套缩进的 css 代码

　　　　expanded：　　展开的多行 css 代码

　　　　compact：　　简洁格式的 css 代码

　　　　compressed：压缩后的 css 代码

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

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

　　6、继承。Less 的继承： &:extend(.name); Sass 的继承： @extend .name

posted on 2019-10-21 17:31 bala001 阅读(693) 评论(0) 编辑收藏举报

刷新页面返回顶部