LESS与SASS

LESS和Sass在语法上有些共性，比如下面这些：

• 混入(Mixins)——class中的class；
• 参数混入——可以传递参数的class，就像函数一样；
• 嵌套规则——Class中嵌套class，从而减少重复的代码；
• 运算——CSS中用上数学；
• 颜色功能——可以编辑颜色；
• 名字空间(namespace)——分组样式，从而可以被调用；
• 作用域——局部修改样式；
• JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

LESS和Sass的主要不同就是他们的实现方式，LESS是基于JavaScript，所以，是在客户端处理的。

另一方面，Sass是基于Ruby的，然后是在服务器端处理的。

 

变量

LESS 文件  

@border-color : #b5bcc7;           
 　　.mythemes tableBorder{
　　border : 1px solid @border-color; 
}

 

SASS 文件

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

 

关于变量在LESS和SASS中的区别就是，LESS用@，SASS用$。

 

混入参数
LESS 文件

   

 .layout(@w,@h,@b,@bgc){
       width: @w;
       height: @h;
       border: @b; 
      background-color: @bgc；
     }     
header{       
　　.layout(1900px,150px,1px solid black,black);
     }

 

SASS 文件

@mixin layout($w,$h,$b,$bgc){
    width:$w;
    height:$h;
    border:$b;
    background-color:$bgc;
}
header{
    @include layout(1900px,150px,1px solid black,black)       
}

 

@mixin的强大之处，在于可以指定参数和缺省值。

 

@mixin left($value: 10px) {
     　　　　float: left;
     　　　　margin-right: $value;
    　　}

使用的时候，根据需要加入参数：   　　

div {
     　　　　@include left(20px);
     　　}

 

 

 

继承

SASS允许一个选择器，继承另一个选择器。比如，现有class1：

.class1 {
     　　　　border: 1px solid #ddd;
     　　} 
//class2要继承class1，就要使用@extend命令：
.class2 {
     　　　　@extend .class1;
     　　　　font-size:120%;
     　　}

 

运算

SASS在数字上比LESS更专业。它已经可以换算单位了。SASS可以处理无法识别的度量单位并将其输出。

/* SASS */ 
2in + 3cm + 2pc = 3.514in
 /* LESS */ 
2in + 3cm + 2pc = Error

条件语句与控制

LESS不支持该功能。使用 Sass，你可以使用if { } else { } 条件语句，以及for { }循环。它甚至支持 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操作符。

/* Sample Sass "if" statement */
@if lightness($color) > 30% {
    background-color: #000;
} @else {
    background-color: #fff;
}
 
/* Sample Sass "for" loop */
@for $i from 1px to 10px {
    .border-#{i} {
    border: $i solid blue;
    }
}