Mehrere Klassen auf demselben übergeordneten Element funktionieren bei gleichzeitiger Verwendung nicht: BEM
P粉208469050
P粉208469050 2023-09-10 17:58:49
0
1
589

Ich habe zwei Klassen in der Kopfzeile: .header-container 和一个主题类,例如 solid-greensolid-blue.

Das aktuelle Markup funktioniert gut beim Anwenden verwandter Designstile, aber ich möchte BEM verwenden, daher sollte das gesamte CSS in einer header-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;
  }
}
<header class="header-container solid-green">
  <div class="top-banner">Top banner</div>
  <div class="main-banner">Main banner</div>
</header>

Wenn ich jedoch das CSS mit der header-container-Klasse umschließe, funktioniert die Theme-Klasse nicht mehr. Kann mir jemand sagen, wo ich falsch liege?

P粉208469050
P粉208469050

Antworte allen(1)
P粉510127741

.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;
    }
  }
}
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage