LESS селектор с родителем подкласса

Question

Как я могу повлиять на дочерний элемент указанного родительского селектора подкласса? Я делаю имена своих классов в случае верблюда, поэтому я создаю свой файл LESS следующим образом:

.popup {
    &Content {
        &Title {
            opacity: 0;
        }
    }
    &.active {
        &Content {
            &Title {
                opacity: 1;
            }
        }
    }
}

Но это не совсем то, что мне нужно. Компилируется в

.popupContentTitle {
    opacity: 0;
}
.popup.activeContentTitle
    opacity: 1;
}

Есть ли способ скомпилировать его правильно:

.popupContentTitle {
    opacity: 0;
}
.popup.active .popupContentTitle
    opacity: 1;
}

Answer 1

Это можно сделать, добавив амперсанд после вложенного селектора:

.popup {
    &Content {
        &Title {
            opacity: 0;

            .popup.active & {
               opacity:1;  
            }
        }
    }
}

Answer 2

См. parent selectors order. E.g.:

.popup {
    &Content {
        &Title {
            opacity: 0;
            .popup.active & { 
                opacity: 1;
            }
        }
    }
}

И, пожалуйста, не переусердствуйте - нет смысла разбивать .popupContentTitle на три отдельных блока, если это на самом деле один с единственным набором свойств. То есть это действительно должно быть просто:

.popupContentTitle {
    opacity: 0;
    .popup.active & { 
        opacity: 1;
    }
}

И, наконец, часто задаваемый вопрос: действительно ли у вас есть элемент .active .popupContentTitle, который НЕ является .popup.active .popupContentTitle? То есть первый .popup там, скорее всего, избыточен.