在 LESS 中嵌套祖先规则

Question

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

body.programme {

    #VideoWrapper {
        border: 1px solid red;
        }

    etc...

    }

但是，如果正文中存在另一个 class，我想更改 #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 
    }
}

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

在 LESS 中嵌套祖先规则

Nesting ancestor rules in LESS

css

nested

ancestor

less