LESS 是一种 CSS 预编译语言，它为开发者提供了很多便捷的工具和语法，可以更加快捷、高效地编写 CSS 样式。其中，条件语句是一种非常实用的语法，可以根据条件不同生成不同的 CSS 样式，本文将为大家介绍在 LESS 中如何使用条件语句来处理不同的样式效果。
LESS 中的条件语句
在 LESS 中，条件语句有两种形式：
- if-else：类似于 JavaScript 中的条件语句，可以根据条件是否成立来执行不同的操作。
- when：用于匹配选择器，只有匹配成功了才会执行后续的操作。
接下来，我们将分别介绍这两种条件语句的使用方法。
if-else
if-else 语句和 JavaScript 中的用法非常类似，只不过语法稍有不同，具体用法如下：
@color: #fff;
.class {
// 如果 @color 和 #000 相等，则将背景颜色设置为 #fff，否则设置为 @color
background-color: if(@color = #000, #fff, @color);
}上面的代码中，if(@color = #000, #fff, @color) 表示如果变量 @color 的值等于 #000，则返回 #fff，否则返回 @color 的值。
当然，我们也可以使用多个 if-else 语句进行嵌套，实现更加复杂的判断。例如，下面的代码根据元素的 padding 值来计算它的宽度：
-- -------------------- ---- ------- --------- ----- ------ - -- -- -------- -- ------------ ---------- ---- ------ ----------- - ----- ----- ------ -- -- -------- ---- ------------ ---------- ---- ---------- ----------- -- ----- ----- ------ -
when
when 语句用于匹配选择器，只有匹配成功了才会执行后续的操作。具体用法如下：
// 当 .class 中的 a 标签被点击时，执行以下操作
.class a:when(:hover) {
text-decoration: underline;
}上面的代码中，:when(:hover) 表示当选择器匹配了处于悬停状态的 a 标签时，才会将 text-decoration 属性设置为 underline。
示例代码
为了更好地理解在 LESS 中使用条件语句来处理不同的样式效果的使用方法，下面提供一些示例代码供大家参考：
-- -------------------- ---- -------
---------- -----
------ -
-- -- --------- -- -------------- ---------- ----
------ ------------ - ----- ----- ------
-- -- --------- ---- -------------- ---------- ----
---------- ------------ -- ----- ----- ------
-- - ------ -- - ------------------ ----
-------------- -
------ -----
-
-上面的代码中，我们使用了 if-else 和 when 两种条件语句，分别实现了变量值的判断和点击或悬停状态的样式变化。
总结
本文介绍了在 LESS 中使用条件语句来处理不同的样式效果的用法和示例代码，希望可以帮助大家更好地掌握 LESS 中的语法和技巧。LESS 中还有许多其他实用的语法和函数，大家可以进一步深入学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bdb0548841e9894a2788b