LESS 是一款流行的 CSS 预处理器，它允许我们在编写样式时使用变量、嵌套规则、混合（Mixin）等功能，使得代码更易读、易维护。此外，LESS 还支持条件语句，在复杂的样式情况下，能够更灵活地控制样式的输出。本文将介绍 LESS 中使用条件语句的技巧，并提供示例代码以供学习参考。
@if 语句
@if 语句是 LESS 中的一种条件语句，它的基本语法如下：
@if (条件) {
// 条件为真时执行的代码
} else {
// 条件为假时执行的代码
}下面是一个简单的示例，实现文本颜色的切换：
-- -------------------- ---- -------
------- -----
-- -
--- ------- -- ----- -
------ -----
- ---- -
------ -------
-
-上面的代码中，首先定义了一个变量 @color，表示文本的颜色。接着使用 @if 语句判断 @color 的值是否等于 #000，如果是，则把文本颜色设置为白色，否则为 @color 的值。我们可以通过修改 @color 的值来看到颜色的变化。
除了等于 ==，@if 语句还支持 !=（不等于）、>（大于）、>=（大于等于）、<（小于）和 <=（小于等于）这些操作符。
@unless 语句
@unless 语句与 @if 语句类似，但是它的条件是相反的，即只在条件为假时执行。其语法如下：
@unless (条件) {
// 条件为假时执行的代码
}下面是一个示例，当设备宽度小于等于 768px 时隐藏侧边栏：
@max-width: 768px;
#sidebar {
@unless (@max-width >= 768px) {
display: none;
}
}上述代码中，首先定义了一个变量 @max-width，表示设备的最大宽度。通过 @unless 语句判断 @max-width 的值是否小于等于 768px，如果是，则隐藏侧边栏。
@when 语句
@when 语句可以用来创建特殊的混合（Mixin），只有在特定的条件下才会生成 CSS 代码。它的语法如下：
.mixin (@参数) when (条件) {
// 条件为真时生成 CSS 代码
}
.selector {
.mixin(@参数);
}下面是一个示例，根据设备宽度设置不同的字体大小：
-- -------------------- ---- ------- ----------------- ------- ---- ------- - ------- - ---------- ------ - ----------------- ------- ---- ------- - ------- - ---------- ------ - -- - ------------------------ ------------------------ -
上述代码中，定义了两个混合 mobile-font-size 和 tablet-font-size，只有在 @media 的值分别等于 mobile 和 tablet 时才会生成 CSS 代码，通过传递 @size 参数来设置字体大小。在 h1 标签上使用这两个混合设置不同的字体大小，根据不同设备的宽度自动切换。
总结
LESS 中使用条件语句能够更灵活地控制样式的输出，提高代码的可读性和可维护性。本文介绍了 @if、@unless 和 @when 三种条件语句的使用方法，并且提供了示例代码以供学习参考。通过这些技巧的运用，我们能够更加轻松地编写可扩展、易维护的 CSS 样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fc3e2bf6b2d6eab3216908