如何利用less 实现循环
时间: 2023-06-29 16:13:46 浏览: 96
如何使用less实现随机下雪动画详解
在 Less 中可以使用循环语句来生成重复的样式规则,循环语句包括 for 循环和 while 循环。
下面是一个使用 for 循环生成重复样式规则的示例:
```less
@iterations: 3; // 定义循环次数
@base: 5px; // 定义基础值
.loop {
width: @base;
height: @base;
for (@i: 1; @i < @iterations; @i++) { // 进行循环
.loop-@{i} {
width: @base + @i * 5px; // 根据循环次数生成样式规则
height: @base + @i * 5px;
}
}
}
```
在上面的示例中,我们定义了一个循环次数 `@iterations` 和一个基础值 `@base`,然后使用 for 循环生成了 `.loop-1`、`.loop-2` 和 `.loop-3` 三个样式规则,根据循环次数生成不同的样式。
当编译成 CSS 时,将会生成以下样式规则:
```css
.loop {
width: 5px;
height: 5px;
}
.loop-1 {
width: 10px;
height: 10px;
}
.loop-2 {
width: 15px;
height: 15px;
}
```
可以看到,通过循环语句,我们可以很方便地生成一组重复的样式规则,而不需要手动编写每个规则。
阅读全文