css - 在 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 
    }
}

但这也可能无法满足您的强制症。