Less的guards and argument matching

  • less guards/argument matching:
.setbackground(@number) when (@number>0){
.setbackground( @number - 1 );
.class@{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影响。 注意:这里clearfix中的&指的是.wrapper
}

 

posted @ 2015-10-27 14:19  世有因果知因求果  阅读(219)  评论(0编辑  收藏  举报