less循环类

最新推荐文章于 2025-04-14 08:09:06 发布

转载最新推荐文章于 2025-04-14 08:09:06 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_42801311/article/details/108098258

文章标签：

#css

css 专栏收录该内容

7 篇文章

订阅专栏

博客给出参考转载地址，提出遍历某个类10次的需求，并展示了相关代码，但未提及代码运行结果。整体围绕特定类的遍历需求展开。

参考、转载地址：https://blog.youkuaiyun.com/weixin_42801311/article/details/108098258

需求：遍历某个类10次

代码：

.loop(   @index) when(@index <= 10   ) {
	.ml-@{index} {
		margin-left: @index * 1px;
	}
	.loop(@index + 1);
}

.loop(1);

结果：

.ml-1 {
  margin-left: 1px;
}
.ml-2 {
  margin-left: 2px;
}
.ml-3 {
  margin-left: 3px;
}
.ml-4 {
  margin-left: 4px;
}
.ml-5 {
  margin-left: 5px;
}
.ml-6 {
  margin-left: 6px;
}
.ml-7 {
  margin-left: 7px;
}
.ml-8 {
  margin-left: 8px;
}
.ml-9 {
  margin-left: 9px;
}
.ml-10 {
  margin-left: 10px;
}