LESS 是一种 CSS 预处理器，它可以让我们写出更加简洁、易于维护的 CSS 代码。除了基本的变量、混合器和嵌套规则等功能外，LESS 还支持条件语句和循环语句，可以帮助我们更加高效地编写前端代码。
条件语句
在 LESS 中，我们可以使用 if、else if 和 else 关键字来创建条件语句。它们的语法如下：
-- -------------------- ---- ------- -- -- -- --- ----------- - -- ---- -- ------- -- --------- -- ---- - -- ------- -- --- ----------- - -- ---- -- ------- -- --------- -- ---- - ---- - -- ---- -- ------- -- --------- -- ----- - -- ------- ------- -- --- ------------ - -- ---- -- ------- -- ---------- -- ---- - ---- -- ------------ - -- ---- -- ------- -- ---------- -- ---- - ---- - -- ---- -- ------- -- --- ---------- --- ----- -
其中，condition 表示一个表达式，可以是任何返回布尔值的表达式。在条件语句中，如果 condition 的值为 true，则执行 if 或 else if 后面的代码块，否则执行 else 后面的代码块（如果有的话）。
下面是一个示例，演示如何使用条件语句来根据不同的屏幕尺寸设置不同的字体大小：
-- -------------------- ---- -------
-------------- -----
-- -
---------- --------------
------ ------ --- ----------- ------ -
--- -------------- - ----- -
---------- ------------- - ----
- ---- -
---------- --------------
-
-
------ ------ --- ----------- ------ -
--- -------------- - ----- -
---------- ------------- - ----
- ---- -
---------- --------------
-
-
-在上面的代码中，我们首先定义了一个基准字体大小 @baseFontSize，然后在 h1 元素的样式规则中，使用 @media 查询来根据不同的屏幕尺寸设置不同的字体大小。在每个 @media 查询中，我们使用条件语句来判断当前的字体大小是否大于某个值，如果是，则将字体大小减少一定的像素值，否则保持不变。
循环语句
除了条件语句外，LESS 还支持循环语句，可以帮助我们更加高效地生成重复的样式规则。在 LESS 中，我们可以使用 for 循环和 each 循环来创建循环语句。
for 循环
for 循环是一种基本的循环语句，它的语法如下：
@iterations: 5;
// for 循环
@for @i from 1 to @iterations {
// code to execute for each iteration
}其中，@iterations 表示循环的次数，@i 表示当前的迭代次数，可以在循环体内部使用。在循环体内部，我们可以使用 @i 来实现不同的样式规则，从而生成一系列重复的样式规则。
下面是一个示例，演示如何使用 for 循环来生成一系列带有不同颜色的按钮样式：
-- -------------------- ---- -------
------------- --
---- -- ---- - -- ------------ -
------------ -
----------------- ---------------- --- - -- - -----
------ ------
-------- ---- -----
-------------- ----
-------- -------------
------------- -----
-
-在上面的代码中，我们首先定义了一个变量 @buttonCount，表示要生成的按钮数量。然后使用 @for 循环来生成一系列带有不同颜色的按钮样式，其中使用 lighten 函数来计算每个按钮的背景颜色，从而实现渐变效果。
each 循环
除了 for 循环外，LESS 还支持 each 循环，它可以遍历一个列表或一个映射，从而生成一系列样式规则。each 循环的语法如下：
-- -------------------- ---- ------- -- ---- ----- ---- -- ----- - -- ---- -- ------- --- ---- ---- - -- ---- ----- ----- ------ -- ---- - -- ---- -- ------- --- ---- --------- ---- -
其中，@list 表示要遍历的列表，可以是一个逗号分隔的值列表或一个包含多个值的列表变量。@key 和 @value 分别表示当前映射项的键和值，可以在循环体内部使用。
下面是一个示例，演示如何使用 each 循环来生成一系列带有不同背景颜色和字体颜色的标签样式：
-- -------------------- ---- -------
-------- ---- ----- ------ ------- -------
------- ------ ---------- -----------
-- -------
----- ------ -- ------- -
----- ----- -- ------ -
----------------------- -
----------------- -------
------ --------------- -----
------------ ------
-------- --- -----
-------------- ----
-------- -------------
------------- -----
-
-
-在上面的代码中，我们首先定义了两个变量 @colors 和 @fonts，分别表示要遍历的颜色列表和字体列表。然后使用 @each 循环来生成一系列带有不同背景颜色和字体颜色的标签样式，其中使用 lighten 函数来计算每个标签的字体颜色，从而实现互补色的效果。
总结
在本文中，我们介绍了 LESS 中的条件语句和循环语句，包括 if、else if、else 和 for、each 关键字的语法和用法。通过学习这些语句，我们可以更加高效地编写前端代码，减少重复的工作量，提高代码的可维护性和扩展性。希望这篇文章对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656fc8a1d2f5e1655d826429