title: Scss: Multiple BEM states class
body: <p>I'm using Scss for my current project with BEM state conventions.</p>
  <p>What i need:</p>
  <p><strong>CSS</strong></p>
  <pre><code>.name {
      font-size: 10px;
  }
  .name--is-focus {
      font-size: 12px;
  }
  .name--is-active {
      font-size: 14px;
  }
  .name--is-focus.name--is-active {
      font-size: 16px;
  }
  </code></pre>
  <p><strong>SCSS</strong></p>
  <pre><code>.name {
      font-size: 10px;
  
      &amp;--is-focus {
          font-size: 12px;
      }
  
      &amp;--is-active {
          font-size: 14px;
          &amp;.name--is-focus {
              font-size: 16px;
          }
      }
  
  }
  </code></pre>
  <p>The code works great.
  However, is this the right way for situation like this?
  I think there should be a more elegant way to do instead of this.</p>
  <pre><code>&amp;--is-active {
      font-size: 14px;
      &amp;.name--is-focus {
          font-size: 16px;
      }
  }
  </code></pre>