LESS Mixin Guards

在 LESS 中，Mixin Guards 允许我们指定一个条件，只有当条件为真时， Mixin 才会被调用。这使得我们能够创建可重用的既定样式，同时具有灵活性。

为什么我们需要 Mixin Guards？

如果我们使用 LESS 中的 mixins 来创建模板样式，则这些模板可能需要用不同的值来处理每种情况。使用 Mixin Guards 可以帮助我们创建可重用的 mixins，同时只有在特定条件下才应用某些样式。

考虑以下示例代码：

.colorizer(@color) {
  background-color: @color;
  &:hover {
    background-color: lighten(@color, 10%);
  }
}

如果我们想为几个元素定义不同的背景颜色，然后应用悬停效果，则使用上述 mixin 来处理它们就很有用。但是，这个 mixin 没有提供任何方式来为这些元素之一添加特殊的背景颜色。

使用 Mixin Guards，我们可以创建一个新的 mixin，它可以包含我们需要的特殊背景颜色。

.colorizer(@color) {
  & when (@color = red){
    background-color: #f00;
  }
  & when (@color = green){
    background-color: #0f0;
  }
  & when (@color = blue){
    background-color: #00f;
  }
}

.colorizer(red);
.colorizer(green);

在这个例子中，我们可以设置特殊的 colorizer mixin 以匹配特定的颜色。我们使用 when 关键字来实现一个条件，只有当颜色等于特定的颜色时才会应用样式。

Mixin Guards 的极大优势

使用 Mixin Guards 可以帮助我们避免重复代码。当我们需要在项目中的多个位置使用相同的 mixins 时，这变得尤为有用。

Mixins 是开发人员工具箱中的一个基本工具，使用 Mixin Guards 可以让它们变得更加强大。在创建 mixin 时，条件的使用会使 mixin 的灵活性增强。通过在条件中使用您的自定义变量，您可以创建与变量有关的 mixins。例如，一个围绕特定颜色的 mixin。

使用 mixin 继承来创建 mixin 是另一个优点。可以使用 @var 继承 mixin，使多个 mixin 具有一个处理内容。这使得 mixins 更简单，更容易维护。

在 LESS 中，mixin guards 可以帮助我们创造基于 mixin 的代码库，这些代码库可以真正实现可重用性。