具有子类父级的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最有可能是冗余。