有几天没更新我的漫岛系列了哈,设定十一月底完成漫岛的第一版,时间挺紧迫的,另外,大家能看到的漫岛的部分页面,就截止到个人中心了,其余的先不给看了。
由于知识杂又多,记不过来,像less稍微复杂一点的语法,每次我还得查一查文档,所以把平时遇到的比较不常规的用法记录下来,随时查阅。
言归正传:
Less的循环
实现功能:一个循环搞定多个div的背景图片。
说明:希望你能领会何时用循环以及如何使用,不必拘泥于我的例子。
实现效果如下:
代码如下:
<!-- html 节点-->
<div class="dashboard">
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div>
//less循环语法
.dashboard {
width:800px;
margin:0 auto;
display: flex;
justify-content: space-around;
.panel {
width: 220px;
height: 100px;
border: 1px solid #f00;
background-position: left top;
background-repeat: no-repeat;
}
}
//循环用法如下:
.loop(@counter) when (@counter<=4) {
.loop(@counter+1);
.panel:nth-of-type(@{counter}) {
@imgsrc: "https://4xiaer.oss-cn-beijing.aliyuncs.com/jy/panel_bg@{counter}.png";
background-image:url("@{imgsrc}");
}
}
.loop(1);
Less的字符串拼接
拼接示例如下:
后面的用到了再继续补充吧。
怎么忽悠一个UI给我漫岛免费做设计啊,好难啊!