带有子类父级的 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 。例如：

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

并且请不要过度嵌套 - 如果它实际上是具有唯一一组属性的块，那么将.popupContentTitle拆分为三个单独的块是没有意义的。 即它真的应该只是：

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

最后是经常提出的问题：你真的有任何.active .popupContentTitle元素不是.popup.active .popupContentTitle吗？即第一个.popup很可能是多余的。