Less的guards and argument matching

• less guards/argument matching:

.setbackground(@number) when (@number>0){
.setbackground( @number - 1 );
[email protected]{number} { background-image: ~"url(backgroundimage-
@{number}.png)"; }
}
.setbackground(10);

输出以下css:

.class1 {
background-image: url(backgroundimage-1.png);
}
.class2 {
background-image: url(backgroundimage-2.png);
}
.class3 {
background-image: url(backgroundimage-3.png);
}
.class4 {
background-image: url(backgroundimage-4.png);
}
.class5 {
background-image: url(backgroundimage-5.png);
}
.class6 {
background-image: url(backgroundimage-6.png);
}
.class7 {
background-image: url(backgroundimage-7.png);
}
.class8 {
background-image: url(backgroundimage-8.png);
}
.class9 {
background-image: url(backgroundimage-9.png);
}
.class10 {
background-image: url(backgroundimage-10.png);
}

• & symbol:

& symbol在less中有特殊的意义，它代表了当前selector的parent:

.class1
{
.class2{
property: 5;
}
}
.class1
{
.class2 & {
property: 5;
}
}
由于&代表了.class1所以编译后将输出以下css:
.class1 .class2 {
property: 5;
}
.class2 .class1 {
property: 5;
}

同样类似地：

.clearfix() {
&:before,
&:after {
content: " "; /* 1 */
display: table; /* 2 */
}
&:after {
clear: both;
}
}

.wrapper {
  .clearfix();    该调用将自动在.wrapper:after{clear: both;}清除float影响
}