css扩展技术：Less和Sass的区别

这个周学习了Less和Sass这两个css框架，我基本了解了它们各自的语法和特性，并通过两个html网页设计的练习，感受一下它们给我们开发者在进行css网页布局过程中带来的便利。下面是我对它们之间的区别的一些总结。

Less和Sass的相同之处：

1.变量：可以单独定义一系列通用的样式，在需要的时候进行调用。

2.混合（Mixins）：class中的class（讲一个class引入到另一个class，实现class与class之间的继承），还可以带参数的混合，就像函数一样。

3.嵌套：class中嵌套class，从而减少代码的重复。

4.运算：提供了加减乘除四则运算，可以做属性值可颜色的运算。

 

Less和Sass之间的区别：

1.实现方式：Less是基于JavaScript，是在客户端进行处理的；Sass是基于Ruby，是在服务器端进行处理的。

2.定义变量：Less定义变量时使用前缀：@；Sass定义变量时使用前缀：$。

//Less定义变量：
@color: #4D926F;

#header {
    color: @color;
}

//Sass定义变量

    $blue : #1875e7;　
    
    　　div {
    　　　color : $blue;
    　　}

 

3.混合（Mixins）：Less中使用混合时，只需在classB中根据classA的命名来是用；Sass中首先在定义混合时需要使用@mixin命令，其次在调用时需要使用@include命令来引入之前定义的混合。

//Less中的混合：
.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

//Sass中的混合：
 @mixin left($value: 10px) {
    　　　　float: left;
    　　　　margin-right: $value;
    　　}

    div {
    　　　　@include left(20px);
    　　}

 

4.解析方式：Less可以向上/向下解析；Sass只能向上解析。

5.变量的作用域：Less中的变量有全局和局部之分；Sass可以变量可以理解为都是全局的，但可以通过在变量后面跟！default，在引入Sass文件之前改变变量的属性值来解决这一问题。

//Less：
@width:100px;
h1{
  @width:200px;
  width:@width;
}
h2{
  width:@width;
}

编译后：
h1 {
  width: 200px;
}
h2 {
  width: 100px;
}


//Sass：

$borderColor:red !default;
.border{
  border:1px solid $borderColor;

}

编译后：
.border {
  border: 1px solid red; }

 

6.比起Less，Sass中增加了条件语句（if、if...else）和循环语句（for循环、while循环和each循环）还有自定义函数：

//if条件句：

    p {
    　　　　@if 1 + 1 == 2 { border: 1px solid; }
    　　　　@if 5 < 3 { border: 2px dotted; }
    　　}

//if...else条件句：

    @if lightness($color) > 30% {
    　　　　background-color: #000;
    　　} @else {
    　　　　background-color: #fff;
    　　}

//循环语句：

//for循环：

    @for $i from 1 to 10 {
    　　　　.border-#{$i} {
    　　　　　　border: #{$i}px solid blue;
    　　　　}
    　　}

//while循环：

    　$i: 6;
    　　@while $i > 0 {
    　　　　.item-#{$i} { width: 2em * $i; }
    　　　　$i: $i - 2;
    　　}

//each循环，类似于for循环：

    @each $member in a, b, c, d {
    　　　　.#{$member} {
    　　　　　　background-image: url("/image/#{$member}.jpg");
    　　　　}
    　　}

//自定义函数：

    @function double($n) {
    　　　　@return $n * 2;
    　　}
    
    　　#sidebar {
    　　　　width: double(5px);
    　　}

 

以上就是我对Less和Sass之间的区别的总结。对于开发人员来说，它们都是很酷的工具，它们也可以帮助开发者更有效和快速的工作。至于选择那个来用可以根据自己的喜好，也可以根据自己工作的公司的要求来灵活运用它们之中的一个或者两个。