LESS中的条件悬停状态

Question

我想在我的LESS mixin中添加一个条件悬停状态。

我尝试了以下操作，但它返回错误：

.foo(@hoverstate:false){

   color:red;

   &:hover when (@hoverstate = true){
      color:blue;
   }

}

这个的正确语法是什么？

Answer 1

dotless不支持"CSS guard"构造，所以你需要一个mixin来保护那里，例如：

.foo(@hoverstate: false) {

    color: red;

    .-(); .-() when (@hoverstate = true) {
        &:hover {
            color: blue;
        }
    }
}

可以简化为：

.foo(...) {
    color: red;
}

.foo(true) {
    &:hover {
        color: blue;
    }
}

（注意我没有使用dotless测试此代码，因此您可能需要更正其他次要的不兼容性）