I have two classes on the header: .header-container
and a theme class like solid-green
or solid-blue
.
The current markup works fine in applying related theme styles, but I want to use BEM, so all CSS should be wrapped in a header-container
class:
.header-container { // all component styles }
.top-banner { height: 70px; } .main-banner { height: 140px; } .solid-green { .top-banner { background-color: green; } .main-banner { background-color: lightgreen; } } .solid-blue { .top-banner { background-color: blue; } .main-banner { background-color: lightblue; } }
<header class="header-container solid-green"> <div class="top-banner">Top banner</div> <div class="main-banner">Main banner</div> </header>
However, when I wrap the CSS with the header-container
class, the theme class no longer works. Can anyone tell me where I'm going wrong?
P粉5101277412023-09-11 16:55:45
.header-container { .top-banner { height: 70px; } .main-banner { height: 140px; } &.solid-green { .top-banner { background-color: green; } .main-banner { background-color: lightgreen; } } &.solid-blue { .top-banner { background-color: blue; } .main-banner { background-color: lightblue; } } }