Less循环等进阶用法（MD.6）

最新推荐文章于 2025-05-31 11:07:12 发布

原创最新推荐文章于 2025-05-31 11:07:12 发布 · 3.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Less循环 #less字符串拼接 #less用法

筑梦漫岛网站搭建专栏收录该内容

20 篇文章

订阅专栏

本文介绍了Less预处理器中的两种高级用法：如何利用循环为多个div设置不同的背景图片，以及字符串拼接的应用。通过实例代码展示了在实际开发中如何巧妙运用这些技巧，帮助开发者更高效地编写样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有几天没更新我的漫岛系列了哈，设定十一月底完成漫岛的第一版，时间挺紧迫的，另外，大家能看到的漫岛的部分页面，就截止到个人中心了，其余的先不给看了。
这里写图片描述
由于知识杂又多，记不过来，像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);