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測試此代碼，因此您可能需要更正其他輕微不兼容問題）