1.变量:
Less:
@my-color: #ff0000;.container {background-color: @my-color;
}
Sass:
$my-color: #ff0000;.container {background-color: $my-color;
}
在这点上,Less和Sass的变量概念基本相同,都是以声明的方式存储值,然后在样式中引用。
2.混合(Mixins):
Less:
.border-radius(@radius) {-webkit-border-radius: @radius;-moz-border-radius: @radius;-ms-border-radius: @radius;border-radius: @radius;
}.box {.border-radius(4px);
}
Sass:
@mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;-ms-border-radius: $radius;border-radius: $radius;
}.box {@include border-radius(4px);
}
在这点上,两者都支持定义可重用的样式块,这些块可以在样式表中重复使用,并且可以接受参数。
3.嵌套:
Less:
.container {padding: 20px;.header {background-color: #f0f0f0;}
}
Sass:
.container {padding: 20px;& .header {background-color: #f0f0f0;}
}
在这个例子中,两者都支持选择器的嵌套,这可以减少代码的重复并且提高代码的可读性。注意在Sass中,需要使用&符号来表示父选择器。
4.运算
Less:
@width: 200px;
@margin: @width / 2; // @margin为100px
Sass:
$width: 200px;
$margin: $width / 2; // $margin为100px
在这个例子中,两者都支持基本的数学运算,包括除法。这些运算可以用于任何数字的计算。