title: Inherit CSS class from separate file?
body: <p>I have a class for a button:</p>
  
  <pre><code>.client-header button {
      /*Properties*/
  }
  </code></pre>
  
  <p>and a class to detect when the menu is open:</p>
  
  <pre><code>.client-menu-open {
      /*Properties*/
  }
  </code></pre>
  
  <p>I would like to change the button background based on whether or not the menu is open. I want something like this:</p>
  
  <pre><code>.client-header button .client-menu-open {
      /*Properties*/
  }
  </code></pre>
  
  <p>But the classes are in two different files, so it doesn't work. Is there any way to do this across different files?</p>
  
  <p>Here is the code for the header index.css:</p>
  
  <pre><code>@import url('../menu/index.css');
  
  .client-header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: var(--header-height);
      overflow: hidden;
      border-bottom: 1px solid #7E7E7E;
      background: #cccccc;
  }
  
  .client-header button {
      float: left;
      height: 100%;
      border: none;
      border-right: 1px solid var(--border-color);
      border-radius: 0;
      box-shadow: none;
      line-height: 39px;
      background-color: #444444;
      color: #FFF;
  }
  
  .client-header button:hover {
      background-color: #555555;
  }
  
  .client-header button:active {
      background-color: #4E4E4E;
  }
  
  .client-header-caption {
      float: left;
  }
  
  .client-header-title,
  .client-header-subtitle {
      margin-left: 10px;
  }
  
  .client-header-title {
      line-height: 25px;
  }
  
  .client-header-subtitle {
      font-size: 0.5rem;
      line-height: 15px;
  }
  
  @media (min-width: 640px) {
      .client-header-title,
      .client-header-subtitle {
          display: inline-block;
          line-height: var(--header-height);
      }
  
      .client-header-title {
          font-size: 1.5rem;
      }
  
      .client-header-subtitle {
          font-size: 1rem;
      }
  
  }
  
  .client-header .client-menu-open button {
      background: #CCCCCC;
  }
  </code></pre>
  
  <p>And here is the code for the menu index.css:</p>
  
  <pre><code>.client-menu {
      position: absolute;
      top: var(--header-height);
      bottom: 0;
      left: -var(--menu-width);
      width: var(--menu-width);
  
      border-right: 1px solid var(--border-color);
  
      padding-bottom: var(--menu-footer-height);
      overflow: hidden;
  
      transition: left 0.2s;
  }
  
  .client-menu-open {
      left: 0;
      box-shadow: 0 0 30px var(--shadow-color);
      background: #444444;
  }
  
  .client-menu-pinned {
      box-shadow: none;
  }
  
  .client-menu-header {
      height: var(--menu-header-height);
      text-align: right;
      background-color: #444444;
  }
  
  .client-menu-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: var(--menu-footer-height);
  
      text-align: right;
  }
  </code></pre>
  
  <p>And the HTML structure is:</p>
  
  <pre><code>&lt;header class="client-header"&gt;
      &lt;button class="client-header-menu-toggle"/&gt;
  &lt;/header&gt;
  &lt;div class="client-menu"/&gt;
  </code></pre>