Less 提供了一种强大的功能——Guard，它允许你在定义函数、mixin 或者其他代码块时添加条件判断。通过使用 Guard，你可以根据某些条件来决定是否执行特定的代码段。这种机制使得 Less 的功能更加灵活和强大。
使用场景
Guard 主要用于以下几种情况：
- 在 Mixin 中根据传入的参数动态地执行不同的代码。
- 在函数中根据输入值的不同返回不同的结果。
- 在循环中控制循环的执行逻辑。
Mixin 中的 Guard
Mixin 是 Less 中非常常用的一种结构，它允许你将一段样式代码封装起来，并通过调用它来多次复用这段代码。当 Mixin 中包含了 Guard 时，它的执行逻辑会根据传入参数的不同而变化。
示例
假设我们想要创建一个可以调整边框宽度的 Mixin，并且希望在不同设备上显示不同的边框宽度。
// www.javascriptcn.com code example
.border-width(@width) when (@width >= 10px) {
border-width: @width;
// 可能还有其他与大边框相关的样式
}
.border-width(@width) when (@width < 10px) {
border-width: 5px; // 默认值
// 可能还有其他与小边框相关的样式
}
.box {
.border-width(15px);
}在这个例子中，.border-width Mixin 根据传入的 @width 参数的大小决定使用哪种样式。
函数中的 Guard
除了 Mixin 外，你还可以在 Less 函数中使用 Guard 来根据不同的输入返回不同的值。
示例
假设我们有一个计算圆角半径的函数，根据传入的值大小返回不同的结果。
// www.javascriptcn.com code example
.rounded-radius(@radius) when (@radius > 0) {
border-radius: @radius;
}
.rounded-radius(@radius) when (@radius <= 0) {
border-radius: 0;
}
.box {
.rounded-radius(10px);
}在这里，.rounded-radius 函数根据 @radius 的值决定是否应用圆角效果。
循环中的 Guard
Less 支持使用循环来生成重复的样式代码，而在循环体内部也可以使用 Guard 来控制循环的执行逻辑。
示例
考虑一个生成多级列表样式的场景：
// www.javascriptcn.com code example
.generate-list-style(@level) when (@level > 0) {
.generate-list-style(@level - 1);
li:nth-child(@{level}) {
list-style-type: decimal-leading-zero;
}
}
ul {
.generate-list-style(4); // 生成最多4级的列表样式
}在这个例子中，.generate-list-style Mixin 递归地生成了不同层级的列表样式，直到 @level 小于等于 0 为止。
结论
通过使用 Less 的 Guard 功能，我们可以极大地增强代码的灵活性和可维护性。无论是 Mixin、函数还是循环，Guard 都为我们提供了强大的工具来处理复杂的条件逻辑。掌握这些技巧，将帮助你在开发过程中更加高效和优雅地解决问题。