Less 是一种流行的 CSS 预处理器，它提供了一些有用的特性以简化 CSS 的编写。其中之一就是条件语句 #when，它可以让我们根据不同的条件选择不同的样式。
语法
#when 跟在一个混合宏之后，然后跟着一个条件。它的一般语法如下：
.mixinName() when (condition) {
// styles to apply when condition is true
}示例
例如，我们可以为不同的浏览器和设备定义不同的样式。让我们来看一下下面的示例，它定义了一个 "box" 混合宏：
-- -------------------- ---- ------- ---- - ------ ------ ------- ------ ----------------- ----- - ------ ---- -------- - ------- --- ----- ----- - ------ ---- ----- - ------- --- ----- ----- - ------ ---- ---- - ------- --- ----- ----- - ------ ---- --- - ------- --- ----- ----- -
上面的代码使用了 #when 条件语句，在不同的浏览器中分别给 "box" 元素定义了不同的边框。当编译器遇到浏览器的前缀时，只会编译对应的样式，从而减少了浏览器的解析时间。
混合宏中的 #when
#when 条件语句也可以用在混合宏的参数中。例如，我们可以通过一个变量设置 "box" 的大小，然后为不同的大小定义不同的样式：
-- -------------------- ---- -------
----------- -
------ ------
------- ------
------ ---- ------ - ------ -
------- --- ----- ----
-
------ ---- ------ -- ------ -
------- --- ----- ------
-
-在上面的代码中，我们使用 @size 参数设置了 "box" 的大小。然后使用 #when 条件语句给不同大小的 "box" 设置了不同的边框颜色。
结论
Less 中的 #when 条件语句是一个非常强大的特性，它可以让我们更加灵活和精确地定义样式。无论是针对特定浏览器和操作系统还是根据元素的属性和状态，我们都可以使用 #when 来实现更高效和优雅的样式定义。如果您是一个前端开发者，在您的下一个项目中尝试使用 #when 来简化 CSS 的编写。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fa4cb405c1e7f6085c3c0c