LESS класс не работает

Question

Я использую этот код в своем файле LESS, &: зависание работает правильно, но .active не работает.

У кого-нибудь есть идея, как это решить?

li{ 
     padding: 8% 10%; 
     list-style-type: none; 
     li.active, 
     &:hover{ 
     background-color: #e33939; 
     color: #fff; 
     } 
     a{ 
     color: inherit; 
     text-decoration: none; 
     } 
    } 

Answer 1

Try:

li{ 
     padding: 8% 10%; 
     list-style-type: none; 
     &.active, 
     &:hover{ 
     background-color: #e33939; 
     color: #fff; 
     } 
     a{ 
     color: inherit; 
     text-decoration: none; 
     } 
    } 

Answer 2

Если вы хотите выбрать li элементов, которые имеют active имени класса вы должны использовать & иначе ваш селектор скомпилирован как descendant combinator selector (li li.active), который выбирает потомок li.active элементов li элементов.

li { 
     padding: 8% 10%; 
     list-style-type: none; 
     &.active, 
     &:hover{ 
     background-color: #e33939; 
     color: #fff; 
     } 
     ... 
} 

Это скомпилированный CSS:

li { 
    padding: 8% 10%; 
    list-style-type: none; 
} 

li.active, 
li:hover { 
    background-color: #e33939; 
    color: #fff; 
} 

...