Plusieurs classes sur le même élément parent ne fonctionnent pas lorsqu'elles sont utilisées simultanément : BEM

Question

J'ai deux classes sur l'en-tête : .header-container 和一个主题类，例如 solid-green 或 solid-blue.

Le balisage actuel fonctionne bien pour appliquer des styles de thème associés, mais je souhaite utiliser BEM, donc tous les CSS doivent être enveloppés dans une classe header-container :

.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>

Cependant, lorsque j'enveloppe le CSS avec la classe header-container, la classe thème ne fonctionne plus. Quelqu'un peut-il me dire où je me trompe ?

Answer 1

.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;
    }
  }
}