具有子类父级的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元素吗？即第一个PUT /users/:id 最有可能裁员。