less 和 sass 的区别

LESS：css的预处理语言，基于javascript在客户端进行处理；

SASS：css的预处理语言，基于ruby在服务端进行处理；

 

相同之处：

1、混入（Mixins）:class

2、参数混入:可传递参数的class，就像函数一样

3、嵌套规则

 

区别：

1、less是基于javascript在客户端进行处理；

　　sass是基于ruby在服务端进行处理；

 

2、变量的声明，less用@，sass用$

/*************LESS***************/
@color:#f00

.main {
    color:@color
}

/************SASS****************/

$color:#f00
.main {
    color:$color
}

　　

3、sass支持条件语句【if/else/for循环等】，less不支持

 

4、变量插值【 less：@{}    sass:#{}】

/*************LESS***************/

@selector:info
@{selector}{
    color:#f00
}

/*************SASS***************/

#{selector}{ color:#f00 }

 

5、定义，参数的使用

/*************LESS***************/
.center(){
    text-align:center;
}

#main{
    .center
}


/*************SASS***************/
@mixin center{
    text-align:center;
}

#main{
    @include center
}