SCSS: parent hover selector
<p>In <code>scss</code> we can use a parent selector class:</p>

<pre><code>&lt;div class="parent is-active"&gt;
  &lt;div class="children"&gt;&lt;/div&gt;
&lt;/div&gt;

.parent {
  width: 200px;
  height: 200px;
}

.children {
  height: 100px;
  width: 100px;

  .is-active &amp; {
    background: red;
  }
}
</code></pre>

<p><a href="https://jsfiddle.net/wx9L9jzj/2/" rel="noreferrer">example</a></p>

<p>How would you write a parent <code>hover</code> selector?</p>