Меньше: как писать: hover и: focus - программирование

Я только начал изучать Less и хотел бы иметь такой результат:

.navbar .nav > li > a {
   /* some rules */
} 

.navbar .nav > li > a:hover {
   /* some rules */
} 

.navbar .nav > li > a:focus {
   /* some rules */
}

Я не могу понять, как писать это в Меньше. Я попробовал

.navbar .nav > li > a {
    /* some rules */
    &:hover {

    }
    &:focus {

    }
}

но это не сработает. Пожалуйста помоги. Спасибо.

Ответ 1

Это, по сути, правильный формат для вложенности, но немного неясно, чего вы ожидаете. Возможно, вы ожидаете дублирования /* some rules */ в :hover и :focus (только на основе того, что вы показываете выше для ввода и вывода - , если это неверное представление о вашей проблеме, просим пояснить). Однако это не то, как работает вложенность. Вложение только подбирает селекторную строку для присоединения псевдокласса к ней, она не заполняет правила, определенные вне ее автоматически в нее. Вам нужно быть более явным, как один из следующих вариантов:

Вариант 1 (с использованием вложенности)

.navbar .nav > li > a {
    /* some rules */
    &:hover {
      /* some rules */
    }
    &:focus {
      /* some rules */
    }
}

Вариант 2 (как и CSS)

.navbar .nav > li > a,
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
    /* some rules */
}

Вариант 3 (использование вложенности с микшированием)

.setRules() {
    /* some rules you type once */
}

.navbar .nav > li > a {
    .setRules();
    &:hover {
      .setRules();
    }
    &:focus {
      .setRules();
    }
}