LESS是一种预处理器，可以增强CSS的样式表语言，支持复杂的计算、混合、嵌套和变量等特性。LESS还支持循环和条件语句，可以帮助你更好的组织和管理CSS的代码。
本文将介绍LESS中循环与条件语句的应用场景及实现方法，并提供示例代码，希望对前端开发者有所帮助。
循环语句
LESS中的循环语句有两种：for循环和while循环。其中，for循环最常用。
for循环
for循环的语法如下：
----- --- ----------------- ---- ------- - -- - -- -- --------- ---------------- - --- - ----------------
在上面的语法中，定义了一个变量@var，其值为10。然后定义了一个.for-loop()的函数，并使用when关键字来定义循环的终止条件（@index大于0）。在函数中，你可以使用@index进行循环操作，可以在函数中使用任意的样式属性，然后递归调用.for-loop()函数来实现循环。
最后，调用.for-loop(@var)函数即可。
下面是一个实际的示例：通过for循环来设置从1到10的.box-样式名：
----------------- ---- ------- - -- -
------------- -
------ ------ - -----
-
---------------- - ---
-
--------------上述语法可以生成下面的CSS代码：
------ - ------ ----- - ------ - ------ ----- - ------ - ------ ----- - --- ------- - ------ ------ -
while循环
while循环与for循环类似，只是语法有些不同。while循环的语法如下：
----- --
------------- ---- ----- -- --- -
----------- -
------ ---- - -----
-
----- ---- - --
--------------
-
--------------在while循环中，使用.while-loop()函数进行循环，使用when关键字来定义循环的终止条件。在函数中，使用@var变量进行循环操作，然后使用@var: @var + 1;语句来更新@var变量。最后，调用.while-loop()函数即可。
上述语法可以生成和for循环相同的CSS代码。
条件语句
在CSS中，你可以使用@media规则来按照不同的屏幕尺寸设置样式。但是，在某些情况下，你可能需要根据变量的不同值来设置不同的样式。此时，你可以使用LESS中的条件语句。
LESS中的条件语句有四种：if、else、when和unless。其中，if和else最常用。
if和else
if和else的语法如下：
----- ---
------- -
------ -----
- ---- ----- -- --- -
----------------- ----
-
- ---- ----- - --- -
----------------- -----
-
-
------- -
------ -----
- -- ----- -- --- -
----------------- ----
-
- ---- -
----------------- -----
-
-在上述语法中，首先定义了一个变量@var，然后在.class1和.class2中使用了when和if语句来设置不同的样式。当@var大于或等于10时，.class1的背景色为红色，.class2的背景色同样为红色，否则二者的背景色为蓝色。
when和unless
when和unless用来对when和unless进行简化。它们的语法如下：
----- ---
------- -
------ -----
- ---- ----- -- --- -
----------------- ----
-
- ------ ----- -- --- -
----------------- -----
-
-
------- -
------ -----
- -- ----- -- --- -
----------------- ----
-
- ------ ----- -- --- -
----------------- -----
-
-和if和else类似，when和unless可以带有多个.class和样式属性。
总结
循环和条件语句是LESS的重要特性，可以大大提高CSS的编写效率和可读性。通过本文的介绍，相信大家对LESS中的循环和条件语句有了更深入的了解，可以在实际开发中灵活使用这些语句。
完整示例代码如下：
----- ---
----------------- ---- ------- - -- -
------------- -
------ ------ - -----
-
---------------- - ---
-
--------------
----- --
------------- ---- ----- -- --- -
----------- -
------ ---- - -----
-
----- ---- - --
--------------
-
--------------
----- ---
------- -
------ -----
- ---- ----- -- --- -
----------------- ----
-
- ---- ----- - --- -
----------------- -----
-
-
------- -
------ -----
- -- ----- -- --- -
----------------- ----
-
- ---- -
----------------- -----
-
-
------- -
------ -----
- ---- ----- -- --- -
----------------- ----
-
- ------ ----- -- --- -
----------------- -----
-
-
------- -
------ -----
- -- ----- -- --- -
----------------- ----
-
- ------ ----- -- --- -
----------------- -----
-
-来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64d1ce2cb5eee0b5259242c5