Question

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

现在，问题是我想添加一个条件，这样我就不会被迫在mixin中应用&:hover声明，所以我尝试将默认值设置为@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应用于元素时？

Answer 1

你需要做的是宣布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;
}

少 - 在嵌套的Mixin上使用Guard

1 个答案: