嵌套祖先规则在 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;
}

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

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