title: SASS - reference parent of parent
body: <p>I'm trying to keep my code as DRY as possible. Consider this example:</p>
  
  <pre><code>#parent {
    position: relative;
  
    #child {
      position: absolute;
      top: 0;
      left: 0;  
    }
  }
  </code></pre>
  
  <p>Now I want to add a hover effect on the <code>#parent</code> that will alter the <code>#child</code>. I know I can do it like this:</p>
  
  <pre><code>#parent {
    position: relative;
  
    #child {
      position: absolute;
      top: 0;
      left: 0;   
    }
  
    &amp;:hover #child {
      transform: scale(1.2, 1.2);
    }
  }
  </code></pre>
  
  <p>But I'm not happy with this solution. It isn't completely DRY because <code>#child</code> is declared twice. Another way to do it is like this:</p>
  
  <pre><code>#parent {
    position: relative;
  }
  
  #child {
    position: absolute;
    top: 0;
    left: 0;
  
    #parent:hover &amp; {
      transform: scale(1.2, 1.2);
    }  
  }
  </code></pre>
  
  <p>This is arguably more semantic, but no more DRY because <code>#parent</code> is declared twice.</p>
  
  <p>Is there a truly DRY way to do this with SASS?</p>