首页 > 其他 > 详细

Less的guards and argument matching

时间:2015-10-27 14:51:19      阅读:264      评论:0      收藏:0      [点我收藏+]
  • 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影响
}

 

Less的guards and argument matching

原文:http://www.cnblogs.com/kidsitcn/p/4914094.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!