css - 基于 body 类嵌套 CSS

Question

我的网站有多个主题，例如浅色或深色主题。这是通过一个类应用于 body 。如果 body 有黑色，我想应用某些样式。

我试过这个:

body.dark {
    .sidebar {
        background-color: #444;
    }
    .intro {
        background-color: #CCC;
    }
    /* etc */
}

但是，没有应用任何样式。这种情况的正确方法是什么？

我可以做 .sidebar.dark，但是当前的深色 CSS 文件在 .intro、.sidebar 等中。

Answer 1

在纯 CSS 中没有这样的嵌套/作用域。你将不得不一遍又一遍地编写 body.dark。

body.dark .sidebar {
    background-color: #444;
}
body.dark .intro {
    background-color: #CCC;
}

• P.S - 可以使用动态样式表语言，如 LESS和 SASS