sass与less的区别

大家好，欢迎来到IT知识分享网。

区别

1.语法不同

sass有两种语法格式
 

 1. 以.scss为后缀名的嵌套写法
nav { 
   
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//-----------编译后
nav { 
   
  width: 100px;
  color: #F90;
}
 2. 最早的缩进语法
 nav 
    width:100px;
    height:100px;
 编译后也是一样的
 

less的语法格式嵌套写法
  #header { 
   
  color: black;
  .navigation { 
   
    font-size: 12px;
  }
  .logo { 
   
    width: 300px;
  }
}

2.变量的声明不同

sass使用 $
$highlight-color: #F90;

less使用 @
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { 
   
  color: @light-blue;
}

3.Mixin不同

sass的用法与JavaScript的函数是一样的，定义后直接使用 @include调用

  @mixin silly-links { 
   
  a { 
   
    color: blue;
    background-color: red;
  }
}
@include silly-links;
//编译后
a { 
   
  color: blue;
  background-color: red; }

less就是定义一个类，然后直接当函数使用(less不提供定义函数)

.b-coloe { 
   
    border: 4px solid red;
}
.box { 
   
    .b-coloe();
    width: 100px;
    height: 200px;
    background-color: blue;
}
//编译后
.b-coloe { 
   
  border: 4px solid red;
}
.box { 
   
  border: 4px solid red;
  width: 100px;
  height: 200px;
  background-color: blue;
}