LESS 中如何使用变量进行条件判断
LESS 是一种 CSS 预处理器，它可以通过变量、函数、嵌套等特性，让 CSS 更加灵活、易于维护。在 LESS 中，我们可以使用变量进行条件判断，实现更加灵活的样式控制。
LESS 中的条件判断语句有两种形式：@if 和 when。其中，@if 是标准的 CSS 条件判断语句，而 when 则是 LESS 特有的语法，用于更加复杂的条件判断。
@if 语句
@if 语句的基本语法如下：
@if (条件) {
// 符合条件时执行的代码
} else {
// 不符合条件时执行的代码
}其中，条件可以是任意表达式，只要最终的结果是 true 或 false 即可。例如：
@color: #f00;
@if (@color == #f00) {
// 当 @color 的值为 #f00 时执行的代码
} else {
// 当 @color 的值不为 #f00 时执行的代码
}在上面的代码中，我们使用了 @if 语句来判断 @color 的值是否为 #f00。如果是，则执行 if 代码块中的内容，否则执行 else 代码块中的内容。
当然，@if 语句也支持嵌套使用，例如：
-- -------------------- ---- -------
------- -----
--- ------- -- ----- -
-- - ------ --- ---- ------
------- ------
--- ------- - ----- -
-- - ------ ---- ---- ------
- ---- -
-- - ------ ------ ---- ------
-
- ---- -
-- - ------ ---- ---- ------
-在上面的代码中，我们首先用 @if 判断 @color 的值是否为 #f00，如果是，则在 if 代码块中定义了一个 @width 变量，并使用 @if 判断 @width 的值是否大于 50px。
when 语句
when 语句是 LESS 特有的语法，用于更加复杂的条件判断。它的基本语法如下：
.some-class when (条件) {
// 符合条件时应用的样式
}其中，.some-class 是一个 CSS 类名，当条件满足时，会将样式应用到该类名上。
例如，我们可以使用 when 语句来实现根据不同设备宽度应用不同的样式：
-- -------------------- ---- -------
----------- -
---------- -----
- ---- ----------- ------ -
---------- -----
-
- ---- ----------- ------ -
---------- -----
-
-在上面的代码中，我们定义了一个 .some-class 类名，并使用 when 语句来根据不同设备宽度应用不同的字体大小。当设备宽度小于等于 768px 时，应用 14px 的字体大小；当设备宽度小于等于 480px 时，应用 12px 的字体大小。
总结
使用变量进行条件判断是 LESS 中非常重要的特性，它可以让我们更加灵活地控制样式。在实际开发中，我们可以根据不同的需求，灵活运用 @if 和 when 语句，实现更加高效、优雅的样式控制。
示例代码：
-- -------------------- ---- -------
------- -----
--- ------- -- ----- -
-- - ------ --- ---- ------
------- ------
--- ------- - ----- -
-- - ------ ---- ---- ------
- ---- -
-- - ------ ------ ---- ------
-
- ---- -
-- - ------ ---- ---- ------
-
----------- -
---------- -----
- ---- ----------- ------ -
---------- -----
-
- ---- ----------- ------ -
---------- -----
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c5d40badd4f0e0ff05c926