LESS 中的条件悬停状态

【问题标题】：Conditional hover state in LESSLESS 中的条件悬停状态
【发布时间】：2014-09-04 09:11:24
【问题描述】：

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

我尝试了以下方法，但它返回错误：

.foo(@hoverstate:false){

   color:red;

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

}

正确的语法是什么？

【问题讨论】：

【解决方案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 测试此代码，因此您可能需要更正其他轻微的不兼容性）

【讨论】：