LESS 是一种 CSS 预处理语言，它提供了许多方便的语法和功能，使得我们可以更加高效地编写 CSS。其中，条件语句是 LESS 中一项非常实用的功能，可以帮助我们根据不同的条件生成不同的样式。
基本语法
LESS 中的条件语句有两种形式：if 和 unless。它们的基本语法如下：
-- -- -- --- ---- - -- -- - -- ------ -- ------- ---- - -- -- -
其中，条件可以是任意表达式，例如变量、算术运算、比较运算等等。如果条件成立，则执行 if 或 unless 语句块中的样式。
常见应用
根据浏览器类型生成不同样式
有些 CSS 样式在不同的浏览器中可能需要使用不同的前缀，例如：
-- ------- -- ------------------- ---- -- ------ - ------ -- ---------------------- ---- -- ---- -- -------------- ----
这时，我们可以使用 LESS 的条件语句来根据浏览器类型生成不同的样式：
----------------------- -
--- ----------- -
------------------- --------
-
--- ---------- -
---------------------- --------
-
-------------- --------
-
---- -
--------------------
-上面的代码中，我们定义了一个 .border-radius() 混合器，它接受一个半径参数。在混合器内部，我们使用 if 语句判断浏览器类型，并生成对应的样式。最后，我们可以在 .box 类中调用 .border-radius() 混合器，生成带有不同前缀的 border-radius 样式。
根据屏幕尺寸生成不同样式
在响应式设计中，我们可能需要根据不同的屏幕尺寸生成不同的样式。这时，我们可以使用 LESS 的条件语句和媒体查询结合起来，生成响应式样式：
---- -
------ -----
------ ------ --- ----------- ------ -
--- ---------- -
-------- -----
-
----- -
------ ----
-
-
-上面的代码中，我们使用 @media 媒体查询定义了一个针对屏幕宽度大于等于 768px 的样式块。在样式块内部，我们使用 if 语句判断设备类型，并生成对应的样式。
根据变量生成不同样式
有时候，我们需要根据不同的变量生成不同的样式。这时，我们可以使用 LESS 的条件语句和变量结合起来，生成动态样式：
------- -----
---- -
----------------- -------
--- ------------------ - ---- -
------ -----
-
----- -
------ -----
-
-上面的代码中，我们定义了一个 @color 变量，并在 .box 类中使用它生成背景色样式。在 if 语句中，我们使用 lightness() 函数获取颜色的亮度值，并根据亮度值生成对应的文字颜色。
总结
LESS 中的条件语句是一项非常实用的功能，可以帮助我们根据不同的条件生成不同的样式。通过本文的介绍，我们学习了条件语句的基本语法和常见应用，可以在实际项目中灵活运用，提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6573d653d2f5e1655dd01000