title: child selector in hover in scss
body: <p>so I have this html code</p>
  <pre><code>&lt;aside class=&quot;sidebar&quot;&gt;
     &lt;div class=&quot;sidebar__logo&quot;&gt;....&lt;/div&gt;
     ....
  &lt;/aside&gt;
  </code></pre>
  <p>I want the sidebar__logo width change to 80px when I hover over aside
  so I write this scss style</p>
  <pre><code>.sidebar {
      width:100px;
      &amp;__logo{
          width : 40px;
      }
      &amp;:hover {
          width:200px;
          &amp; .sidebar__logo {
               width: 80px;
          }
      }
  }
  </code></pre>
  <p>which works fine, but it's not a BEM approach.</p>
  <p>how can I change it to be something like this</p>
  <pre><code>.sidebar {
      width:100px;
      &amp;__logo{
          width : 40px;
          &amp; hovered over the parent {
               width : 80px
          }
      }
      &amp;:hover {
          width:200px;
  
      }
  }
  </code></pre>