带有 sub-class parent 的 LESS 选择器

Question

如何影响指定父子class 选择器的子选择器？我用驼峰式命名我的 class 名字，所以我像这样构建我的 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 分成三个单独的块是没有意义的。 IE。它真的应该只是：

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

最后一个常见的问题：你真的有任何 .active .popupContentTitle 元素不是 .popup.active .popupContentTitle 吗？ IE。第一个 .popup 很可能是冗余的。

带有 sub-class parent 的 LESS 选择器

LESS selector with sub-class parent

css

less