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测试此代码，因此您可能需要更正其他轻微不兼容问题）