2

我正在使用 LESS 处理一组按钮，但我遇到了一种似乎找不到解决方案的情况。基本上，我有一个 mixin，我将其应用于.button具有正常状态和在 mixin 本身中声明的悬停状态的类。

现在，问题是我想添加一个条件，这样我就不会被迫&:hover在 mixin 中应用声明，所以我尝试为@check变量设置默认值并when (@check)在:hover状态下使用，但这会产生错误。

我已经把它从我原来的块中简化了一点，但基本上这代表了我想要做的，但似乎找不到合适的方法来实现。

._mixin (@color: red, @check: true) {
    background: @color;

    &:hover() when (@check) { // tried &:hover(@check) when (@check) as well
       background: darken(@color, 10%);
    }
}

.button {

    ._mixin(#333);

    &.disabled {
        ._mixin(#333, false);
    }    

}

如何设置 mixin 以:hover按需排除状态，例如，当.button.disabled应用于元素时？

4

1 回答 1

2

您需要做的是两次声明 mixin，一次用于所有应该应用的样式，一次用于所有需要保护的样式：

//these styles are always applied when ._mixin is used
._mixin (@color: red, ...) {
    background: @color;
}
//these styles are applied only when the second parameter is true
._mixin (@color: red, true) {
    &:hover {
        background: darken(@color, 10%);
    }
}

.button {
    ._mixin(#333);

    &.disabled {
        ._mixin(#333, false);
    }    
}

或者，您可以创建一个内部 mixin，它上面有一个保护：

._mixin (@color: red, @guard: true) {
    background: @color;
    //catchall for when the guard doesn't match
    .inner() {}
    //set your styles that you want to match in a guarded inner mixin
    .inner() when (@guard) {
      &:hover {
        background: darken(@color, 10%);
      }
    }
    //apply the inner mixin to the current mixin
    .inner;
}
于 2013-02-21T22:14:56.050 回答