Ich habe zwei Klassen in der Kopfzeile:.header-container和一个主题类，例如solid-green或solid-blue.
Das aktuelle Markup funktioniert gut beim Anwenden verwandter Designstile, aber ich möchte BEM verwenden, daher sollte das gesamte CSS in einerheader-container-Klasse verpackt sein:
.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; } }
Wenn ich jedoch das CSS mit derheader-container-Klasse umschließe, funktioniert die Theme-Klasse nicht mehr. Kann mir jemand sagen, wo ich falsch liege?
.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; } } }