Родитель Selector вложенный &: парить

Question

Я использую Less селектор родительского сократить мои селекторы:

.module-name { 
// styles go here 
&__sub-module-1 { 
    //styles go here 
} 
} 

Теперь моя проблема заключается в том, чтобы продолжать использовать родительский селектор для добавления имени-модуля внутри вложенного : оператор наведения. Например. при наведении подмодуля-1 я хочу что-то изменить в подмодуле-2. Внутри &: оператор hover, на что ссылается родительский селектор?

.module-name { 
    &__sub-module1 { 
    &:hover { 
    &__sub-module2 { 
    // on hover of .module-name__sub-module1 change something in .module-name__sub-module2 
    } 
    } 
    } 
} 

Если я пишу это так это работает, но это поражение цели с помощью родительского селектора автоматически заполнить имя модуля:

.module-name { 
    &__sub-module1 { 
    &:hover { 
    .module-name__sub-module2 { 
    // on hover of .module-name__sub-module1 change something in .module-name__sub-module2 
    } 
    } 
    } 
} 

Я надеюсь, что я мог бы адекватно выразить мой проблема; любая помощь приветствуется.

Answer 1

Родительский селектор (&) всегда будет ссылаться на полного родителя на основе уровня, на котором вы находитесь. Например, на первом уровне гнездования & относится к .module-name. На втором уровне он относится к .module-name__sub-module1, а на третьем уровне относится к .module-name__sub-module1:hover.

Выписка из Less Веб-сайт: Обратите внимание, что & представляет все родительские селекторов (не только ближайший предок или общий корень предок)

подчеркнутая часть в вышеупомянутом заявлении это мой включение на основе контекста

Для этого конкретного случая вы можете назначить module-name переменной и использовать s интерполяция выбора, как показано ниже, для формирования селекторов.

Значение переменной никогда не изменится в отличие от родительского селектора (&) независимо от того, сколько уровней гнездования у вас есть и на каком уровне вложенности вы его используете.

@module-name: mod-name; 
.@{module-name} { 
    &__sub-module1 { 
     &:hover { 
      & .@{module-name}__sub-module2 { 
       // on hover of .module-name__sub-module1 change something in .module-name__sub-module2 
       color: blue; 
      } 
     } 
    } 
}