Условное зависание в LESS

Question

Я хотел бы добавить условное состояние при наведении курсора на мой LESS миксин.

Я пробовал следующее, но он возвращает ошибку:

.foo(@hoverstate:false){

   color:red;

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

}

Какой правильный синтаксис для этого?

Answer 1

dotless не поддерживает конструкцию "CSS guard", поэтому вам понадобится миксин, чтобы поместить туда сторож, например:

.foo(@hoverstate: false) {

    color: red;

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

это можно упростить до:

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

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

(Обратите внимание, что я не тестировал этот код с dotless так что возможно вам нужно исправить другие мелкие несовместимости)