css - 具有子类父级的 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;
}

标签： cssless

Answer 1

这可以通过在嵌套选择器后附加 & 符号来完成：

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

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