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; } }