将祖先规则嵌套在LESS中

Question

我有一个LESS文件，其中包含了一大堆规则中的一大堆规则：

body.programme {

    #VideoWrapper {
        border: 1px solid red;
        }

    etc...

    }

但是，如果正文中存在另一个类，我想改变#VideoWrapper的样式。我以为我可能会做以下事情......

body.programme {

    #VideoWrapper {
        border: 1px solid red;

        body.inside & {
            border: 1px solid yellow;
            }

        }

    etc...

    }

基本上我试图输出以下CSS规则：

body.programme #VideoWrapper {
    border: 1px solid red;
}
body.programme.inside #VideoWrapper {
    border: 1px solid yellow;
}

如果没有将规则从父body.programme包装器中拉出来，这是否可以在LESS中实现？

Answer 1

我认为使用＆符选择器应该可以做到这一点，例如：

body.programme {
    #VideoWrapper {
        // Your styles 
    }
    &.inside {
        #VideoWrapper {
            // Different styles 
        }
    }
}

另一种方法（唉意味着将这些样式移出body）可能是：

#VideoWrapper {
    // generic styles
    body.programme & {
        // special styles 
    }
    body.programme.inside & {
        // further styles 
    }
}

但这可能也不能满足你的强迫症。