title: How to select grand parent on SCSS inside BEM modifier?
body: <p>While i was trying BEM and SCSS. Using SCSS to select modifier and Elements is easy but the hard part is while using modifier and referencing element that doesn't have modifier class is breaking the neat approach i made. Here is the quick example what i am trying to do.</p>
  
  <p>This is the HTML</p>
  
  <pre><code>&lt;div class="icon-box icon-box--red"&gt;
     &lt;h3 class="icon-box__title&gt;This is title&lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the SCSS</p>
  
  <pre><code>.icon-box {
    &amp;__title {
      color: black;
    }
  
    &amp;--red {
      &amp;__title {
        color: red;
      }
    }
  }
  </code></pre>
  
  <p>And the output css is</p>
  
  <pre><code>.icon-box {
     background: white;
  }
  .icon-box__title {
    color: black;
  }
  .icon-box--red {
    background: black;
  }
  .icon-box--red__title {
    color: red;
  }
  </code></pre>
  
  <p>The compiled CSS is correct but i want to achieve this</p>
  
  <pre><code>.icon-box {
     background: white;
  }
  .icon-box__title {
    color: black;
  }
  .icon-box--red {
    background: black;
  }
  .icon-box--red .icon-box__title {
    color: red;
  }
  </code></pre>
  
  <p>While i can reference it using name .icon-box__title but i want to go back to grand parent. Is there any approach i can use?</p>
  
  <p>Thank you</p>