LESS 是一种动态样式语言，与 CSS 相似，但比 CSS 更加强大和灵活。LESS 中循环语句的使用可以帮助开发者减少重复的代码，提高代码的复用性。本文将为大家介绍 LESS 中如何使用循环语句。
for 循环的使用
LESS 中使用 for 循环语句的格式如下：
.for (@var, @limit) {
.loop (@i) when (@i <= @limit) {
// 循环体
.loop(@i + 1);
}
.loop(1);
}上面的代码中，@var 是循环变量，@limit 是循环次数。在循环体内可以使用 @i 表示循环的当前次数。
例如，使用 for 循环生成 5 个盒子的样式：
-- -------------------- ---- -------
---- ---- -- -
--------- -
------ -----
------- -----
----------------- -----
------ -----
-
-------- - ---
-上述代码会生成以下 CSS 代码：
-- -------------------- ---- ------- ------ - ------ ----- ------- ----- ----------------- ----- ------ ----- - ------ - ------ ----- ------- ----- ----------------- ----- ------ ----- - ------ - ------ ----- ------- ----- ----------------- ----- ------ ----- - ------ - ------ ----- ------- ----- ----------------- ----- ------ ----- - ------ - ------ ----- ------- ----- ----------------- ----- ------ ----- -
可以看到，使用循环可以生成多个盒子的样式，避免了重复的代码。
while 循环的使用
除了 for 循环，LESS 还支持 while 循环。while 循环和 for 循环类似，区别在于循环体内的实现方式。
.while (@condition) when (@condition) {
// 循环体
}例如，使用 while 循环实现逐步加深的字体颜色：
@color: #000;
.while (@color <= #fff) when (@color <= #fff) {
.step-@{color} {
color: @color;
}
@color: lighten(@color, 10%);
}上述代码会生成以下 CSS 代码：
-- -------------------- ---- ------- ------------- - ------ ----- - ------------- - ------ -------- - ------------- - ------ -------- - ------------- - ------ -------- - ------------- - ------ -------- - ------------- - ------ -------- - ------------- - ------ -------- - ------------- - ------ -------- - ------------- - ------ -------- - ------------- - ------ -------- - ------------- - ------ -------- -
可以看到，使用 while 循环可以实现逐步修改的效果。
总结
循环语句是 LESS 中必不可少的一部分，可以大大提高代码的复用性和效率。以上是 for 循环和 while 循环的使用方法及示例，希望对大家学习 LESS 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653a62227d4982a6eb462827