在前端开发中，CSS 是一个必不可少的技术。LESS 作为一种动态样式语言，可以使 CSS 更加灵活和强大，在样式开发上更方便。与 CSS 不同的是，LESS 支持循环和条件判断语句，使得我们可以更加高效地编写样式代码。本文将详细介绍 LESS 的循环和条件判断语句，并提供示例代码以便读者更好地理解。
循环语句
循环语句使得我们可以在样式中重复使用代码块。在 LESS 中，循环有两种：for 循环和while 循环。
for 循环
for 循环允许您迭代一个代码块，使其针对一些参数重复执行。一个典型的 for 循环语句长这个样子：
@charset "UTF-8";
// for 循环，i 从 1 到 3
@for i from 1 to 4 {
.box-@{i} {
width: 10px * @i;
}
}上述代码将会输出以下 CSS 代码：
-- -------------------- ---- ------- ------ - ------ ----- - ------ - ------ ----- - ------ - ------ ----- -
如上代码所示，我们使用了变量 i 作为迭代器，它从 1 开始，每次逐渐增加，直到它达到 4，执行过程中，代码块会将变量 i 代入计算，从而得到相应的 CSS 样式。
while 循环
while 循环只要满足一个条件就会一直执行代码块，直到这个条件不再被满足。一个典型的 while 循环语句长这个样子：
-- -------------------- ---- -------
-------- --------
-- ----- ----
--- --
------ -- -- - -
--------- -
------ ---- - ---
-
--- -- - --
-上述代码将会输出以下 CSS 代码：
-- -------------------- ---- ------- ------ - ------ -- - ------ - ------ ----- - ------ - ------ ----- - ------ - ------ ----- -
如上代码所示，我们设置了一个变量 j 并将其初始化为 0，当 j <= 3 时，执行所定义的代码块，变量 j 每执行一次，就会 +1，直到 j > 3。
条件判断语句
条件判断语句允许我们针对不同的情况选择不同的代码块。在 LESS 中，判断语句分为 if 和 else。
if 语句
if 语句可以让我们在特定条件下执行特定的代码块。一个典型的 if 语句长这个样子：
-- -------------------- ---- -------
-------- --------
-- -- --
------- -----
---- -
------ ----
-- ------ -----------
- ---- ------- - --- -
------ -----
-
-上述代码将会输出以下 CSS 代码：
-- -------------------- ---- -------
---- -
------ ----
-
------ ------ --- ----------- ----- -
---- -
------ -----
-
-如上代码所示，我们设置了一个变量 width，并在 if 语句中判断变量 width 是否小于 15，如果条件成立，就会修改颜色为蓝色；否则仍然为红色。
else 语句
除了 if 语句，我们还可以借助 else 语句让代码更加灵活。如果 if 语句不成立，则它就会执行 else 语句。一般写在 {} 里面，像这样：
-- -------------------- ---- -------
-------- --------
-- ------- --
------- -----
---- -
------ ----
-- ------ -----------
- ---- ------- - --- -
------ -----
- ---- -
------ ------
-
-上述代码将会输出以下 CSS 代码：
.box {
color: green;
}如上代码所示，因为宽度为 20，不符合 if 中的 @width < 15 的条件，所以代码块就会执行 else 中的颜色修改，将文本颜色设置为绿色。
总结
通过本文的讲解，我们可以知道，使用 LESS 的循环和条件判断语句能够让我们更加高效和灵活地编写样式代码。在项目实战中，相信掌握 LESS 的循环和条件判断语句将会大有裨益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481bc0448841e98941396a0